мии. мї атѕриЫіѕһіпд.сот 


Е.В. Мальчук 


Ө Оформление текстовых блоков и форматирование | 
текста, создание ссылок и навигационных карт | 
© Работа с графикой, размещение на \М/еЬ-странице | 
звуковых файлов и других объектов |__ 
© Создание и форматирование таблиц, |_ 

фреймов и форм, использование сценариев | 
© Методы устранения различий в отображении | 
документов современными браузерами 
© Принципы работы технологии каскадных таблиц 
стилей и полный справочник свойств С$$ | 
© Приемы форматирования НТМІ -документов 
с помощью каскадных таблиц стилей 
© Практические примеры создания сайтов | 
различных типов 
© Публикация готовых сайтов в Интернет 
и методы их раскрутки 


Издатагьснй дом “Вильямс 


ББК 32.973.26-018.2.75 
М2 
УДК 681.3.07 


Издательский дом “Вильямс” 
Зав. редакцией А. В. Слепцов 


По общим вопросам обращайтесь в Издательский дом “Вильямс” по адресу: 
їлѓо@ҹіатѕриЫіѕһіпр.сот, Нир://мму мі агѕриЫ̇іѕһіпр.сот 
115419, Москва, а/я 783; 03150, Киев, а/я 152 


Мальчук, Е.В. 


М21 НТМЕІ и С$$. Самоучитель. — М. : Издательский дом “Вильямс”, 2008. — 
416 с. : ил. 


ІЅВМ 978-5-8459-0907-7 (рус.) 


В этой книге в простой и доступной форме излагаются основы Меб-технологий, основ- 
ные принципы создания НТМІ -разметки и методы использования технологии С$$ для 
самостоятельной разработки МеБ-сайтов. Ее цель — научить читателя самостоятельно пи- 
сать грамотный, оптимизированный НТМ!-код от начала до конца, используя все сушест- 
вующие возможности. Помимо детального изложения всех аспектов использования 
НТМЕ, большое внимание в книге уделено относительно новой технологии, предостав- 
ляющей новые интересные возможности визуализации \МеБ-страниц, — каскалным табли- 
цам стилей (Сазсаётя $1уіе Ѕһеег, С$$). Отдельно обсуждаются вопросы оптимизации 
графических элементов, поскольку грамотная подготовка изображений — очень важная 
составляющая оптимизации МеБ-сайтов. 

Книга содержит множество полезных рекомендаций и практических примеров по всем 
обсуждаемым вопросам. Благодаря исключительной глубине охвата каждой из тем и де- 
тальности изложения материала, она будет полезна не только начинающим, но и достаточ- 
но опытным создателям как отдельных НТМГ--документов, так и У\еЪ-сайтов в целом. 


ББК 32.973.26-018.2.75 


Все названия программных продуктов являются зарегистрированными торговыми марками соответ- 
ствующих фирм. 

Никакая часть настоящего издания ни в каких целях не может быть воспроизведена в какой бы то ни 
было форме и какими бы то ни было средствами, будь то электронные или механические, включая фо- 
токопирование и запись на магнитный носитель, если на это нет письменного разрешения Издательско- 
го дома “Вильямс”. 

Соругівћ © 2008 Бу УлШапеРиы та Ноцзе, 


АЙ гірћі гезегус іпсіџдіпр (ће гірћ оѓ гергойисііоп іп мћоіе ог іп рай іп апу Ѓогт. 


15ВМ 978-5-8459-0907-7 (рус.) "© Издательский лом “Вильямс”, 2008 


Оглавление 


Введение 
Часть 1. НТМЕ 
Глава 1. Основы НТМІ. 
Глава 2. Оформление текста 
Глава 3. Графика, звук и мультимедиа 
Глава 4. Таблицы 
Глава 5. Формы 
Глава 6. Фреймы 
Глава 7. Заключительные замечания 
Глава 8. Практический пример использования НТМІ. 


Часть И. С$5 
Глава 9. Основы С$$ 
Глава 10. Синтаксис С55 
Глава 11. Свойства С55 
Глава 12. Форматирование блоков и списки 
Глава 13. Практический пример применения стилей 
Глава 14. Оптимизация таблиц стилей и оформление текста 
Глава 15. Использование блоков 
Глава 16. Схемы позиционирования и слои 
Глава 17. Дополнительные возможности 
Часть Ш. Общие вопросы 
Глава 18. Графика для Интернет 
Глава 19. Размещение работы в Интернет 
Часть ІУ. Приложения 
Приложение А. Таблицы 
Приложение Б. Полный текст примеров 
Приложение В. Глоссарий 
Предметный указатель 


Содержание 


Введение 
Часть 1. НТМЕ 


Глава 1. Основы НТМІ. 

Введение в основы НТМІ. 

История развития языка НТМЕ, 

Как работает МеБ 
Принципы взаимодействия браузера и \МеБ-сервера 
Понятие ОКІ. 
Система доменных имен 
Понятие М№еБ-страницы и М№еб-сайта 

Как создаются НТМІ -документы 

Как угодить браузеру 

Глава 2. Оформление текста 

Основы разметки. Понятие тега 
Атрибуты элементов 

Основные структурные элементы НТМІ -документа 
Заголовок документа — элемент НЕАР 
Тело документа — элемент ВОРҮ 
Комментарии 

Оформление текстовых блоков 
Заголовки — элементы Н1-Нб 
Параграфы (абзацы) — элемент Р 
Контейнеры — элементы РУ и $РАУ 

Форматирование текста 
Начертание шрифта 
Управление шрифтами и их размером 
Показательный пример работы разных браузеров с ВАЗЕЕОМТ 
Предварительно отформатированный текст 
Логические выделения в тексте 
Сокращения 
Расстановка кавычек 
Верхние и нижние индексы 
Разделители 

Ссылки, или почему это назвали паутиной 

Элемент А 
Относительная и абсолютная адресация 
Ссылки в новых окнах 
Использование привязки 
Таблица атрибутов элемента А 


Создание списков 
Список определений 
Нумерованный список 
Ненумерованный список 
Специальные символы 


Глава 3. Графика, звук и мультимедиа 
Рисунки на М№еЬ-странице 
Элемент МС 
Выравнивание изображений 
Задание рамки 
Изображения-ссылки 
Когда браузер не показывает рисунков 
Задание размера 
Изображения — таблица атрибутов элемента ІМС 
Звук — элемент ВСЅООМЮ 
Встраивание произвольных объектов 
Элемент ОВЈЕСТ 
Элемент ЕМВЕР 
МІМЕ-типы 
Навигационные карты 
Элементы МАР и АКЕА 


Глава 4. Таблицы 

Создание таблиц 

Элемент ТАВІЕ 

Элемент САРТІОМ — название таблицы 

Элемент ТЕ — строки таблицы 

Элементы ТР и ТН — ячейки таблицы 

Создаем сложную табличную структуру 
Группировка строк таблицы 
Группировка столбцов таблицы 

Некоторые особенности при работе с таблицами 
Как изменить цвет границы таблицы 

Алгоритмы обработки таблиц 
Алгоритм фиксированной обработки таблиц 
Алгоритм автоматической обработки таблиц 


Глава 5. Формы 
Добавляем интерактивность 
Элемент ЕОВМ 
Элемент ПМРОТ и его богатые возможности 
Текстовое поле (Тех!) 
"Текстовое поле для ввода пароля (Раѕѕмога) 
Флажки (СпесКБох) 
Переключатели (Кадю) 
Кнопка отправки (Зибтй) 
Графическая кнопка отправки (їтаве) 


Содержание 


Кнопка очистки (Кеѕеї) 107 


Произвольная кнопка (Вийоп) 107 
Добавление файлов (Ее) 108 
Скрытый управляющий элемент (Нійдеп) 109 
Многострочное текстовое поле — элемент ТЕХТАКЕА по 
Раскрывающиеся списки — элемент ЗЕГЕСТ Ш 
Кнопки — элемент ВИТТОМ 115 
Метки — элемент АВЕС, 115 
Пример формы регистрации пользователя на сайте 116 
Перевод фокуса ввода на элемент 118 
‘Сценарии 119 
Элемент ЅСКІРТ 120 
Как скрыть код сценария от браузера 121 
Динамическое изменение документа 122 
Элемент МОЅСКІРТ 122 
Глава 6. Фреймы 123 
Понятие фрейма 123 
Создание структуры фреймов — элемент ЕКАМЕЅЕТ 124 
Загрузка ссылок во фреймы 128 
Преимущества и недостатки фреймов 131 
Пример — фотоальбом 132 
Глава 7. Заключительные замечания 135 
ОТО-определения типов документов 135 
Замечания о таблицах 136 
Логическое обоснование дизайна с помощью таблиц 136 
Динамическое переформатирование 136 
Последовательное представление 136 
Группы строк и столбцов 137 
Доступность 137 
Возможности оптимизации НТМІ -кода 137 
Перспективы развития языка НТМІ. 138 
Обзор возможностей НТМТ--редакторов 139 
Основы построения М№еБ-сайтов 141 
Классификация МеБ-сайтов 142 
Типы навигации 143 
Навигационные возможности браузеров 145 
Как не попасться на крючок 145 
Глава 8. Практический пример использования НТМІ. 147 
Создание сайта на основе таблиц 147 
Подведем итоги табличной верстки 161 
Часть 1. С5$ 163 
Глава 9. Основы С$$ 165 
Зачем содержимое документа отделяется от описания его визуального 
оформления 166 
История развития технологии таблиц стилей 171 


8 Содержание 


Возможности С55 1 
Возможности С5$ 2 
Включение С55 в НТМІ. 
Внутренние таблицы стилей 
Встроенные таблицы стилей 
Внешние таблицы стилей 
Импорт таблиц стилей 
Как скрыть информацию о стиле от браузера 


Глава 10. Синтаксис С$$ 
Правила С$$ 
Типы селекторов 
Селектор по элементу 
Селектор по классу 
Селектор по идентификатору 
Контекстный селектор 
Псевдоэлементы 
Псевдоклассы 
Группировка селекторов 
Единицы измерения 
Единицы длины 
Процентные величины 
Обозначение цвета 
Задание ОҜІ. 
Какие единицы длины больше подходят для МеЬ 
Наследование 
Каскадирование 
Общие принципы 
Порядок каскадирования 
Специфичность селекторов 
Как С$$ обрабатывается браузером 
Глава 11. Свойства С$5 
Цвет и фон 
Свойство союг 
Свойство Баскегоипа-соіог 
Свойство Баскргоипа-ітаре 
Свойство Баскргоипа-тереаі 
Свойство Баскегоипі-аќасһтепі 
Свойство басКргоипа-розйоп 
Свойство БасКргоцпа 
Шрифт 
Свойство ѓопі-Ѓатііу 
Свойство ѓопі-ѕуіе 
Свойство ѓопі-уагіапі 
Свойство ќопі-уеівћі 
Свойство ќопі-ѕіге 


Содержание 


Свойство ќопі 
Изменение размера шрифта в браузере 
Текст и его свойства 

Свойство ѓех!-йесогайоп 

Свойство їехі-ајівп 

Свойство гехі-іпдепі 

Свойство їех!-(гапѕѓогт 

Свойство уепіса!-аіірп 
Интервалы 

Свойство могӣ-ѕрасіпв 

Свойство Іейег-ѕрасіпр 

Свойство Їіпе-һеівћі 


Глава 12. Форматирование блоков и списки 

Блоки в НТМІ.и С$$ 

Поля 
Свойства тагріп-1ор, тагріп-гівћ, тагрт-БоНот, тагріп-Іећ 
Свойство тагріп 

Границы 
Свойства Богӣег-ќор-у1ійкћ, Богӣег-гірћі-міаг, Богдег-Бойот-уіаќћ, 

Ббогаег-Іећ-уїа 

Свойство Богдег-мійћ 
Свойство Богдег-соіог 
Свойство Богаег-ѕіуіе 
Свойства Богаег-1юр, Богаег-гівћ, Богіег-Бопоти Богаег-Іећ 
Свойство Богдег 

Отступы 
Свойства раййіпр-ќор, рабаіпр-гівћ, радаіпр-Бокот, райдіпр-Іећ 
Свойство райаіпе 

Отступы или поля? 

Списки 
Свойство 11-51уІе-(уре 
Свойство 1151-1уіе-ітаре 
Свойство 111-5(уІе-роѕііоп 
Свойство 111-51уіе 

Глава 13. Практический пример применения стилей 

Заголовок 

Первая таблица 

Вторая таблица 

Навигационное меню 

Анализ результатов 


Глава 14. Оптимизация таблиц стилей и оформление текста 


Структуризация таблиц стилей 
Оптимизация таблиц стилей 
Выбор имен 
Верстка таблицы стилей 
Значения по умолчанию 


10 Содержание 


Использование стенографических свойств 
Группировка селекторов 


Практический пример структуризации и оптимизации 


Оформление текста при помощи С$$ 
Выбор гарнитуры шрифта 
Размер шрифта 
Оформление текста 


Глава 15. Использование блоков 
Блоковая модель 
Различия в блоковых моделях 
Устранение различий 
Еще раз о важности директивы РОСТҮРЕ 
Ширина и высота блоков 
Ускорение обработки таблиц в С$$ 
Модель визуального форматирования 
Виды блоков — свойство біѕріау 
Значение попе 
Значение Моск 
Значение іпііпе 
Значение Ііѕі-кет 
Подключение таблиц стилей при помощи Јауа$сгірі 
. Управление видимостью и переполнением блоков 
Свойство үіѕібШу 
Свойство оуегЙо\ 
Значение уіѕїбіе 
Значение ћіддеп 
Значение ѕсго 
Значение ашо 
Блоки и таблицы 
Разрешение конфликтов границ 
Глава 16. Схемы позиционирования и слои 
Позиционирование блоков 
Нормальный поток 
Центрирование в нормальном потоке 


Пример верстки в нормальном потоке — дневник оп-Нпе 


Свойство розой 
Относительное позиционирование 
Абсолютное позиционирование 


Пример верстки сайта с использованием абсолютного позиционирования 


Фиксированные блоки 
Плавающие блоки 
Свойство Поаг 
Свойство сіеаг 
Слои в С55 
Пример — раскрывающесся меню 


Глава 17. Дополнительные возможности 
Оформление элементов форм при помощи С$$ 
Изменение стиля полосы прокрутки 
Использование нескольких стилей одновременно 
Создание ссылок-кнопок 
Альтернативная таблица стилей для вывода на печать 
Обзор возможностей С5$-релакторов 


Часть Ш. Общие вопросы 


Глава 18. Графика для Интернет 
Векторная и растровая графика 
Векторная графика 
Растровая графика 
Сравнительные характеристики 
Цветовая модель ВСВ 
Безопасные цвета Интернет 
Особенности графики для М№еЬ 
Формат ЈРЕС 
Формат СІЕ 
Формат РМС 
Использование ІтареКеаду для оптимизации изображений 
Параметры сохранения ЈРЕС 
Параметры сохранения СІЕ 
Параметры сохранения РМС 


Глава 19. Размещение работы в Интернет 
Регистрация домена 
Хостинг 
Рекламная кампания 
Вместо заключения 


Часть ІУ. Приложения 


Приложение А. Таблицы 
Специальные символы 
Таблица именных цветов 
Панграммы 

Русские панграммы 
Английские панграммы 


Приложение Б. Полный текст примеров 
Код страницы с табличным дизайном 
Код страницы, переписанной при помощи С$$ 
Полный пример кода сайта фирмы “ДОМ” 
Полный код примера “Раскрывающиеся меню” 


Приложение В. Глоссарий 
Предметный указатель 


12 Содержание 


Введение 


В последнее время наблюдается стремительное развитие самого популярного сервиса 
Интернет — МҰ (Иона ИЛае И/еЬ, Всемирная паутина). Растет как количество МеЬ- 
сайтов, так и их качество. В первые годы своего развития язык НТМЕ, с помощью кото- 
рого и создаются все шедевры У/еБ-лизайна, был еше ограничен в своих возможностях, 
поэтому и сайты того периода значительно отличались от современных. Меб использо- 
вался в то время преимущественно в научных целях, для более удобного и быстрого об- 
мена информацией между учеными, которые трудились в разных уголках планеты. В те 
годы на Уеб-серверах располагались большие объемы текстовой информации, без осо- 
бых изысков оформления. 

Меб-технологии постепенно развивались, достигая все новых высот. Появилась воз- 
можность сопровождать текстовые блоки графическим материалом. Настоящая револю- 
ция произошла в \еБ-дизайне с появлением в языке НТМЕ. средств поддержки таблиц, 
что позволило точно позиционировать графические элементы на странице и создавать 
более привлекательные по своему внешнему виду страницы. Развивался и сам язык 
НТМІ., и сопутствующие ему средства программирования, позволяющие создавать более 
яркие, запоминающиеся и, главное, динамичные МеБ-сайты. Страницы перестали быть 
“мертвыми”, теперь они могли видоизменяться или даже создаваться по запросу пользо- 
вателя. Это сделало страницы более информативными, теперь, воспользовавшись поис- 
ком, можно легко найти нужную информацию. До этого возможности поиска не сущест- 
вовало, были только каталоги ресурсов, как в библиотеке, пользоваться которыми было 
не так удобно. 

Стремительно растущее количество информационных ресурсов самого разного на- 
значения — от электронных библиотек до электронных СМИ, — развлекательные ре- 
сурсы, игровые порталы, где можно сразиться с роботом или другим пользователем сети, 
и другие \Меб-сайты привлекали и привлекают к себе огромное количество пользовате- 
лей. В наши дни кажется, что только ленивый не создал себе страничку на сайте бесплат- 
ного хостинга вроде ВЕЕр: / /мми.пакой.ка или ВЕЕр: / /мъъ. Бк. киа. Но делать это 
правильно и грамотно умеют пока не все. 

Цель этой книги — в простой и доступной форме изложить основы Међ-технологий и 
языка НТМІ.. Зачастую сделать Меб-страницу несложно, сейчас для этого разработано 
множество программных средств. Многие текстовые редакторы и другие программы 
имеют встроенную возможность сохранения документа в формате НТМІ.. Можно, не 
мудрствуя лукаво, воспользоваться ими, но результат будет похож на стихотворение, на- 
писанное компьютером: казалось бы, и рифма есть, и смысл улавливается, но все-таки 
это далеко от настоящей поэзии. Создав такого “монстра”, вы не сможете им управлять, 
так как не понимаете основных принципов создания разметки. “Монстрами” такие стра- 
ницы тоже называю не случайно — объем программного кода, который создают про- 
граммы, преобразовывающие документы в формат НТМІ., очень сильно далек от опти- 
мального, иногда он превышает его в десятки раз. я хочу сказать, что можно самостоя- 
тельно создать страницу, идентичную по внешнему виду созданной автоматически, но 
объем ее кода будет в несколько раз меньше созданного программой. Для нашей страны 
все еще остается актуальной скорость передачи информации по каналам связи, так как 
‘большинство домашних пользователей по-прежнему используют модемное соединение 
с Интернет, а скорость такого соединения невелика и дорог каждый байт. 


Наша цель — научиться писать грамотный, оптимизированный код самостоятельно 
от начала и до конца. Мы будем двигаться по ступеням развития самого языка НТМЕ,, 
изучая его возможности. Кроме этого, мы рассмотрим относительно новую технологию, 
предоставляющую новые возможности визуализации Меб-страниц, — каскадные табли- 
цы стилей (Саѕсайіпе 51уе ЗНее! — С$5). Отдельно поговорим об оптимизации графиче- 
ских элементов, так как именно они составляют основной объем МеБ-страницы, и по- 
этому грамотная подготовка изображений — очень важная составляющая оптимизации 
объема страницы. 


От издательства 


Вы, читатель этой книги, и есть главный ее критик и комментатор. Мы ценим ваше 
мнение и хотим знать, что было сделано нами правильно, что можно было сделать лучше 
ичто еще вы хотели бы увидеть изданным нами. Нам интересно услышать и любые другие 
замечания, которые вам хотелось бы высказать в наш адрес. 

Мы ждем ваших комментариев и надеемся на них. Вы можете прислать нам бумажное 
или электронное письмо либо просто посетить наш \У\еЪ-сервер и оставить свои замеча- 
ния там. Одним словом, любым удобным для вас способом дайте нам знать. нравится или 
нет вам эта книга, а также выскажите свое мнение отом, как сделать наши книги более 
интересными для вас. 

Посылая письмо или сообщение, не забудьте указать название книги и ее авторов, 
атакже ваш обратный адрес. Мы внимательно ознакомимся с вашим мнением и обязатель- 
но учтем его при отборе и подготовке к изданию последующих книг. Наши координаты: 


Е-тай: іпҒоёмі11іалвроЪ1іѕћіпа.сот 
Мү: 


ВЕЕр: //емм.мі114атаерир1ізћіпо.сот 


Информация для писем 


из России: 115419, Москва, а/я 783 
из Украины: 03150, Киев, а/я 152 
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В этой части ... 


Глава 1. Основы НТМЕ 

Глава 2. Оформление текста 

Глава 3. Графика, звук и мультимедиа 

Глава 4. Таблицы 

Глава 5. Формы 

Глава 6. Фреймы 

Глава 7. Заключительные замечания 

Глава 8. Практический пример использования НТМЕ 


Глава 1 


Основы НТМІ. 


В этой главе... 

Введение в основы НТМІ. 
История развития языка НТМІ. 
Как работает Меб 


Как создаются НТМІ.-документы 


М 2. ©, а 


Как угодить браузеру 


Итак, вперед! Для начала постарайтесь забыть все то, что раньше знали о языке 
НТМІ, и попробуйте взглянуть на него свежим взглядом. 

В своем изложении я буду отталкиваться от того, что читатели этой книги не знают 
ничего о создании УеБ-страниц, но имеют общее представление о Ме, в частности уме- 
ют просматривать сайты. Собственно, если вы никогда не видели Међ-страницу, то вряд 
ли читали бы сейчас эти строки. Те же, кто знаком с процедурой создания У/еб-страниц, 
может бегло просмотреть содержание и воспользоваться книгой как справочником, что- 
бы освежить в памяти подзабытые вещи. 


Введение в основы НТМЕ 


В первую очередь, чтобы научиться писать на НТМІ., нужно понять, что это за язык. 
НТМЬЕ — это НурегТехи Магкир І.апвиаве (Язык гипертекстовой разметки). Не пугайтесь, 
если это вам ни о чем не говорит, сейчас попробуем разобраться вместе. 

Во-первых, НТМ!, — это язык, но не тот, которым мы пользуемся в обычной жизни 
для передачи мыслей. Это компьютерный язык, и, следовательно, он имеет свои особен- 
ные правила, которые необходимо соблюдать. Иначе этот свод правил называется син- 
таксисом, — он определяет четкую последовательность, в которой его элементы должны 
записываться, а позднее читаться и воспроизводиться браузером при просмотре. 

Во-вторых, НТМЕ. — это язык разметки. Это означает, что он берет определенные 
части документа и придает им особый смысл. Зачем это нужно делать? Давайте разберем- 
ся на примере фрагмента текста. 


Пример 1.1 


Строительная фирма “Дом” 

Фирма “Дом” образовалась в 1998 году и с тех пор занимает лидирующее место на 
рынке строительства и отделочных материалов. 

Фирма имеет сеть магазинов и торговых залов, расположенных в разных районах го- 
рода. В них вы можете найти все для вашего дома, начиная с отделочных материалов 
и заканчивая мебелью и аксессуарами. 


Человек легко может распознать в этом фрагменте заголовок Строительная фирма 
“Дом” и два абзаца текста. Но с точки зрения компьютера — это просто набор символов, 
расположенных в определенном порялке. И больше ничего! Нам же может потребоваться 
сообщить компьютеру, что в этом фрагменте есть заголовок и два абзаца текста. Причин 
может быть несколько: в документах большего размера нам может потребоваться, на- 
пример, составить содержание, в котором указываются только заголовки, или же просто 
отображать заголовки другим стилем, отличным от основного текста. Но мы не сможем 
этого сделать до тех пор, пока компьютер не отличает, где заголовок, а гле простой текст. 
Таким ‘образом, разметка показывает компьютеру, что есть что. 

Можно привести еще такой жизненный пример. Представьте, что на столе лежит не- 
сколько неизвестных предметов. Вы не знаете ни их названий, ни назначения. И вот кто- 
то заботливый разложил их по полочкам, подписал названия и указал, для чего эти пред- 
меты используются. Теперь вы знаете, что это за предметы и для чего они нужны Раз- 
метка делает то же самое, но только с фрагментами текста или другой информацией. 

Кроме этого, НТМЕ. — это язык гипертекстовой разметки. Гипертекстом можно на- 
звать текст в любом формате, имеющий такую особенность: некоторые части текста мо- 
гут ссылаться на другие части текста, что позволяет быстро переходить от одной части 
к другой. Например, в примере выше есть фрагмент: “сеть магазинов и торговых залов”. 
Возможно, вы захотите посетить один из них, ближайший к вашему дому. Для этого по- 
требуется узнать адреса вышеупомянутых магазинов и выбрать наиболее подходящий. 
Тогда с помощью гипертекста можно связать фразу “сеть магазинов и торговых залов” 
с перечнем всех торговых точек, их адресами. телефонами или другой контактной ин- 
формацией. предоставляя тем самым читателю возможность быстрого перехода к той 
части текста, которая его заинтересовала. Такой переход может осуществляться как в 
пределах одного документа, так и межлу фрагментами текста, нахолящимися в разных 
документах одного сайта или даже разных сайтов. 

Гипертекстовые связи представляют собой нечто большее, чем просто ярлыки, в них 
вкладывается определенный смысл. С помощью связей вы задаете семантику документа 
и можете управлять ею. Если вы связываете некий документ с общим содержанием пуб- 
ликации, в которой он участвует, делаете ссылки на следующую и (или) предыдущую ста- 
тью или главу, на глоссарий или информацию об авторе, то тем самым придаете локу- 
менту большую значимость, больше смысла и весомости. Так как первостепенная задача 
любого документа — донести информацию до читателя, то связи делают ее легко дости- 
жимой, если, конечно, они правильно и логично установлены. 


История развития языка НТМІ. 


Развитие языка НТМЕ началось в 1989 году, когда выпускник Оксфорлского универ- 
ситета Тим Бернерс-Ли (Тип Вегпегз-1ее) выдвинул предложение о создании Системы 
гипертекстовых документов. В 1990 году он назвал ее Ион Иде И/е (Всемирная паути- 
на). Одной из составляющих системы был язык гипертекстовой разметки. Его основы 
были заложены в 1990 году, когда Бернерс-Ли разрабатывал первый браузер — програм- 
му, позволяющую просматривать гипертекстовые документы. Наконец, в 1993 году поя- 
вилась первая версия языка — НТМІ 1.0. Но он не был стандартизирован, а это означа- 
ло, что разные производители браузеров могли по-разному реализовывать поддержку 
НТМЕ 1.0. И только к 1995 году, когда закончилась разработка версии НТМІ 2.0, язык 
НТМЕ был стандартизирован. К тому времени новую версию языка НТМЕ, полностью 
поддерживало большинство браузеров. Сегодняшним стандартом является НТМІ 4.01. 
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В 1994 году было решено разбить язык НТМЕ. на уровни. Это было сделано для удоб- 
ства, чтобы обеспечить обратную совместимость версий: каждый новый уровень непре- 
менно включал в себя предыдущие. Было вылелено четыре уровня. 


• Уровень 0 — обязательный для поддержки всеми браузерами. Включает в себя за- 
головки, ссылки (привязка), списки. 


• Уровень 1 — добавляются рисунки и элементы выделения текста (полужирным, 
курсивом, подчеркнутым и др.). 

• Уровень 2 — добавляются формы, позволяющие пользователю вводить информа- 
цию. 


• Уровень 3 — добавляются таблицы, позволяющие размещать на страницах инфор- 
мацию табличного характера и, кроме этого, точно задавать положение объектов 
на странице. 


Язык НТМЕ 2.0 является, например, языком второго уровня, с его помощью нельзя 
верстать страницы со сложным дизайном, так как это невозможно без таблиц. 

В 1996 году уже практически все браузеры поддерживали НТМ!.3.2 (в версии 
НТМЕ 3.0 уже были реализованы таблицы), благодаря которому У\еБ-дизайн испытал 
небывалый взлет. Появилась возможность проектировать и отображать на экране слож- 
ные композиции графических элементов, ничем не уступающие печатным изданиям. Это 
положило начало эре МеБ-дизайна. 

В 1997 году появилась спецификация (описание всех элементов языка и правил их об- 
работки) языка НТМЕ 4.0. Включили в нее поддержку фреймов, унифицировали проце- 
дуру вставки различных объектов, добавив элемент <ОВЈЕСТ>, реализовали поддержку 
каскадных таблиц стилей (С$5), кроме того, были усовершенствованы формы и табли- 
цы, а некоторые элементы были помечены как нежелательные для использования. 

Нежелательными для использования были помечены те элементы НТМІ., которые 
устарели в процессе его развития, они не отвечают непосредственно за разметку, а лишь 
задают визуальное оформление элементов МеБ-страницы. К таким, например, отнесли 
элементы, задающие начертание текста (полужирное, курсивное, подчеркнутое и т.п.), 
элементы управления типом шрифта, его размером, цветом и т.п. Нежелательными для 
использования были отмечены также фреймы. Подробнее о фреймах и нежелательных 
для использования элементах поговорим по ходу изучения материала. 

Последняя версия НТМІ 4.01 стала стандартом в 1999 году, после чего разработки 
этого языка прекратились, так как он фактически исчерпал все свои возможности. Поя- 
вились технологии, более удовлетворяющие потребности современных пользователей 
Интернет: различные языки программирования, позволяющие созлавать динамические 
страницы, обращаться с запросами к базам данных и тому подобному, и более совершен- 
ные языки разметки. На данный момент преемником НТМЕ считается ХНТМІ. 
(еХіепѕіЫ̇е НурегТех! Магкир Гапвиаве — Расширяемый язык гипертекстовой разметки), 
первая версия которого была рекомендована консорциумом МЗС (И/И/ Сопзогиит — 
некоммерческая организация, которая занимается разработкой стандартов, специфика- 
ций, программных продуктов для Међ) в январе 2000 года. До сих пор он еще не получил 
достаточно широкого распространения, но быстро развивается. 

После изучения материалов этой книги для получения дополнительной информации 
можно порекомендовать обратиться на официальный сайт консорциума МЗС, который 
находится по адресу: БЕЕр: / /млми.мЗс.ога. Там можно познакомиться в первоисточ- 
нике со спецификациями НТМІ., С$$, ХНТМІ и найти много другой полезной инфор- 
мации на английском языке. 
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Язык НТМЕ в целом предлагает следующие возможности: 


• публиковать в Меб документы, содержащие заголовки, текст, таблицы, списки, 
фотографии и т.д.; 
• получать дополнительную информацию, используя гипертекстовые ссылки; 


~ создавать формы для интерактивного общения с удаленными сервисами, для по- 
иска информации, заказа товаров ит.д.; 


• включать непосредственно в документ видео- и аудиоклипы, анимационные ро- 
лики и другие объекты. 


Как работает МеБ 


Простой пользователь редко задумывается над тем, каким образом работает Всемир- 
ная Паутина. Как документы с одного сервера становятся доступными для миллионов 
пользователей сети Интернет? Как узнать адрес сайта и получить доступ к той информа- 
ции, которая тебе действительно интересна? Давайте попробуем разобраться, каким об- 
разом устроен Ме. 


Принципы взаимодействия браузера и Меь-сервера 


Интернет в целом представляет собой огромную компьютерную сеть, узлы которой 
разбросаны по всему миру. Сеть эта не имеет ни какого-то выделенного. центрального уз- 
ла, ни тем более владельца. Очень грубо все компьютеры сети Интернет можно разделить 
на серверы, предоставляющие различные сервисы пользователям по их запросу 
(например, доступ к ящикам электронной почты, к каталогам файлов или к МеБ-сайтам), 
и пользовательские рабочие станции, по-лругому клиенты. Таким образом, Интернет ра- 
ботает по принципу клиент/сервер, причем каждый компьютер в разные моменты вре- 
мени может быть как сервером (когда к нему пришел запрос от другого пользователя), 
так и клиентом (когда сам он обращается с просьбой предоставить какой-либо сервис). 

Так, для просмотра одного документа или Међ-страницы пользователю достаточно на- 
брать в адресной строке определенной программы адрес сайта (фактически это адрес серве- 
ра, на котором хранится нужна информация), и программа отобразит желасмую страницу. 
При работе с УЛМ\\ чаще всего используются программы, которые называются браузерами 
(от англ. ю тоне — просматривать). В основном браузеры позволяют просматривать МеЬ- 
сайты, хранить список “избранных” страниц и предоставляют другие функции для работы с 
МеБ-страницами. Некоторые браузеры имеют дополнительные возможности: встроенную 
почтовую программу или клиент для общения по 1СО. Но все-таки главное назначение 
браузера — отображать запрошенную с МеЬ-сервера страницу. Примером такой програм- 
мы может служить самый распространенный на данный момент браузер /егпе! Ехрогег от. 
фирмы Мегозой, им пользуется около 95% пользователей сети Интернет. 

Вот основные понятия, с которыми нам придется сталкиваться лалыше. 


• ОВ! (Опіуегѕа! Кеѕоиғсе 14епиПег) — универсальный илентификатор ресурса. Имен- 
но его пользователи набирают в адресной строке. 


» НТТР (НурегТех! Тгапуег Ргоїосо!) — протокол перелачи гипертекста. На основе 
этого протокола строится взаимодействие между клиентом и сервером. 


• НТМЕ (НурегТем Мағкќир Гапвиаве) — язык гипертекстовой разметки. 


В общем виле взаимодействие клиента и сервера выглядит так: пользователь вволит 
в алресную строку браузера адрес сайта. Браузер формирует свой запрос и отправляет его 
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серверу по протоколу НТТР. Протокол — это набор правил, согласно которым осущест- 
вляется передача информации. Сервер в ответ на запрос передает браузеру запрашивае- 
мую страницу все по тому же протоколу НТТР. Браузер считывает НТМ!-код страницы 
и отображает его на экране. Пользователь наслаждается результатом. 


1. ОЕТ Лобенице пті НТТР1.1 


Браузер и № Сервер 


2. НТТРА Л 200 0К 


Зы» вам плвропва с «рава 
аму». 

Та питан авсвэвеЛе Нилроане Адэ. 
$ 


(оег 


петт 


Рис. 1.1. Взаимодействие между клиентом и сервером 


При взаимодействии клиента и сервера по протоколу НТТР возможно возникновение 
различных ошибок. Например, браузеру не удалось передать запрос серверу из-за про- 
блем в соединении с Интернет или запрос был успешно передан, но страница на сервере 
не была обнаружена, тогда на экран вместо Меб-страницы выводится код ошибки и со- 
обшение, поясняющее суть ошибки. Сушествует пять типов сообщений об ошибках. 
Приведем их группами в соответствии с трехзначными кодами ошибок. Первая цифра 
в этом коде означает тип ошибки, остальные конкретную ситуацию ее возникновения. 


• 1хх: Іпќогтпайопа/Информационная — означает, что запрос получен и продолжа- 
ется его обработка. Условно говоря, это даже не ошибка, и если все идет хоро- 
шо — такого сообщения вы не увидите. 


» 2хх: Ѕиссеѕѕ/Успех — запрос успешно получен, распознан и обработан (тоже по 
сути информационное сообщение). 

• Зхх: Недгесйоп/Переадресация — для выполнения запроса требуются дополни- 
тельные действия, например щелкнуть на ссылке нового места положения сайта. 
Переадресация обычно устанавливается, когда меняется адрес сайта, тогда по ста- 
рому адресу временно располагают сообщение вроде этого: “Мы переехали! Ищи- 
те нас по новому адресу” и указывают новый адрес. В этом случае пользователю 
надо щелкнуть на ссылке, и он попадет на нужный сайт. Иногда переадресация 
выполняется автоматически и незаметно для пользователя. 

» 4хх: Сіепі Ето/Ошибка на стороне клиента — запрос либо имеет неправильный 
синтаксис, либо не может быть выполнен. Например, ошибка в написании адреса сай- 
та или сайта по такому адресу больше не существует. Наверное, чаще всего прихолится 
видеть ошибки именно такого типа с кодом 404 — №! Роипо/Страница не найдена. 
В этом случае следует проверить правильность написания адреса в адресной строке и 
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повторить запрос. Если же адрес написан верно, то, скорее, всего когда-то такая стра- 
ница на этом сервере была, но теперь ее там больше не существует. Тогда стоит поис- 
кать требуемую информацию в другом месте, воспользовавшись поисковой машиной. 


• 5хх: Ѕегуег Ето/Ошибка на стороне сервера — означает, что серверу не удалось 
правильно обработать запрос. Причины в данном случае могут быть в перегружен- 
ности самого сервера, например, когда к нему обращается слишком много пользо- 
вателей и он просто не в состоянии обработать все запросы, либо это может быть 
простой сбой в его работе. В первом случае следует обратиться с аналогичным за- 
просом позднее, когда загруженность сервера снизится. Во втором надо ждать, 
когда служба технической поддержки сервера восстановит его работоспособность. 


Понятие ЦВЕ 


Ранее уже упоминалось, чтобы увидеть в окне браузера нужную страницу, необходимо 
ввести в адресную строку ее адрес. Что же такое алрес МеЬ-страницы? 

Много лет назад кто-то предложил ввести понятие ресурса. Ресурсом в данном случае 
является некое абстрактное понятие. Ресурсом может быть что угодно, любой источник 
информации. Так для чего же оно нужно? 

К любому источнику информации должен быть предоставлен доступ, иначе получить из 
него информацию будет трудно или совсем невозможно. За недолгое время работы в сети 
Интернет вы могли заметить, что количество сайтов, которое доступно в ней, измеряется 
уже многими миллионами. Таким образом, должен существовать механизм, позволяющий 
выявить тот уникальный ресурс (в нашем случае У\еб-сайт), который интересует вас в это 
время. Но механизм этот должен быть понятен и человеку, и компьютеру. Для этого и при- 
думали ОКІ. (Ипйтт Кезоиксе 14епиЙег — Универсальный илентификатор ресурса). 

Существует два типа универсальных илентификаторов ресурсов: ОКМ (Ипйотт Кезоигсе 
„Мате — Универсальное наименование ресурса) и ОКІ (Цпйогт Кезоиксе Госатог — Универ- 
сальный локатор ресурса). Страшные названия? Зато с простым смыслом. 

Представьте, что вы хотите найти фрагмент некоего литературного произведения, 
чтобы процитировать в сочинении или статье. Если не знаете ни автора, ни названия 
произведения, то, скорее всего, придется трудно. Если же известен автор и название, то 
ситуация немного упростится, но по-прежнему непонятно, где именно внутри самого 
произведения следует искать. Но если вы знаете, что требуемый фрагмент можно найти в 
третьей части, во второй главе и на такой-то странице в 3—5 строках сверху, то потратите 
пару минут на то, чтобы найти нужную главу по содержанию и отыскать в ней нужные 
‘строки. По большому счету не важно, где вы собираетесь искать цитату, главное, чтобы 
вы знали, как найти то место, где она находится. 

С \еБ-страницами дело обстоит точно так же. Нужно знать название сервера, где на- 
ходится эта страница, кроме этого, надо знать путь от корневого каталога Мер-сервера до 
нужного документа и название самого документа. Это некий аналог почтового адреса, но 
только для сети Интернет. 

Типичный ОКІ. выглядит так: 


пёр:/лмМідеоЕхоһапде.гийогиту/пдех.рһр 


! разделитель 
название протокола адрес меб-сервера путь кфайлу на сервере 


Рис. 1.2. Строение (ВЕ. 
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Сначала указывается название протокола, по которому нужно обратиться к \еБ- 
серверу. В нашем случае передаются гипертекстовые документы, поэтому и используется 
протокол НТТР (НурегТехи Тгапуег Рпоосо! — Протокол передачи гипертекста). На осно- 
ве этого протокола строятся взаимодействия между сервером и нами, точнее, нашим 
браузером. Далее идет разделитель, состоящий из двоеточия и двойного слеша (/). После 
разделителя пишется адрес У/еБ-сервера или, по-другому, доменное имя. И завершается 
ОВ указанием пути к нужному файлу на \№еБ-сервере. Названия папок разделяются 
символами слеша (/). 

Если набрать этот адрес в строке браузера, то попадете на главную страницу форума 
сайта по обмену видеофильмами — Загаоу Уійео Ехсһапве. 

Другие протоколы, встречающиеся при задании ОВ: 


» ҒТР — РИ Тгапѕѓег Ргогосо! (Протокол передачи файлов), используется при пере- 
даче файлов и взаимодействии ЕТР-серверов; 


» ЕЕ — используется при работе с файлами на локальных дисках компьютера. 
Пример для обращения кдиску С: Ғі1е: / /С:/ Ёо1дӢег /Е11е. Вет]. 


Система доменных имен 


Изначально любой компьютер, подключенный к сети Интернет, должен иметь свой 
ІР-адрес (И\егте Ргоќосо! Адагеѕѕ), Он представляет собой последовательность четырех 
чисел, разделенных точками. Каждое число может лежать в диапазоне от 0 до 255. Вот 
примеры: 
81.29.73.24 


192.168.0.1 
217.23.64.1 


ТР-адрес для компьютера можно сравнить с почтовым адресом для нас, т.е. если пона- 
добится отправить какое-либо сообщение в конверте бумажной почтой своему другу, ко- 
торый может жить в соседнем доме или в другом городе, а может, даже в другой стране, 
необходимо знать его адрес, а именно: индекс, страну, город, улицу, номер дома и номер 
квартиры. ІР-адрес состоит из номера компьютерной сети и номера компьютера в этой 
сети (хоста). 

Хостом называется компьютер, имеющий доступ в сеть Интернет. 

Таким образом, компьютерам, чтобы установить связь друг с другом, необходимо 
знать 1Р-адреса друг друга. Но компьютер все-таки машина, и запомнить пару десятков 
ІР-адресов в виде набора цифр для него не составит труда. Человеку это будет сделать 
сложнее. Поэтому была придумана Система доменных имен (018 — Боташ Мате 
бумет). Это альтернативная система адресации, более понятная человеку, так как хостам 
может присваиваться, кроме ІР-адреса, еще и символьное имя. Это символьное имя со- 
‘стоит из имени хоста и доменного имени. Доменное имя также состоит из нескольких 
полей, разделенных точками. Имена хостам задаются произвольно системными админи- 
‘страторами сетей. 

Доменная система имеет несколько уровней. Существуют домены верхнего уровня, 
второго, третьего и так далее уровней. Домены верхнего уровня можно разделить на две 
категории: общего пользования и национальные. 

Домены общего пользования предназначены для использования всем Интернет- 
сообществом. К ним относятся домены СОМ, МЕТ, ОБС, ТМРО, ВТ2, МОЅЕОМ, МАМЕ, АЕВО 
и СООР, а также домены ограниченного использования: ІМТ — для международных орга- 
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низаций, Еру — для высших учебных заведений США, Соу — для правительственных 
организаций США и МІТ, — лля военных ведомств США. 

Домены сом, МЕТ, ОКС — первые общие домены верхнего уровня, появившиеся 
в 1984 тоду по решению межлународной организации ІСАММ, созданной мировым со- 
обществом для распределения адресного пространства сети Интернет. Первоначально 
было создано семь доменов общего пользования: сом, МЕТ, ОВС, ІМТ, Еру, СОУ, МІІ,, ИЗ 
них домены сом, МЕТ и ОКС получили самое широкое распространение. 

Национальные домены — это двухбуквенные домены, сформированные по кодам 
стран в соответствии со стандартом 150 3166-1, которые обозначают страну или геогра- 
фический регион, например 05, ОЕ, ОК. Всего в мире существует 273 национальных до- 
мена верхнего уровня. России соответствует домен ВИ — 7 апреля 2004 года ему испол- 
нилось 10 лет. Украине соответствует домен ЧА, Белоруссии — ву, Казахстану — К2 ит.д. 

В доменах верхнего уровня (иногда их называют доменами первого уровня) можно за- 
регистрировать поддомен, который будет уже называться доменом второго уровня. В таком 
случае говорят, что домен второго уровня зарегистрирован в зоне домена первого уровня. 
В зоне домена второго уровня в свою очередь можно зарегистрировать домены третьего и 
следующих уровней. В результате получается иерархическая структура доменных имен. 

Таким образом, доменное имя состоит из разделенных точкой имен доменов верхне- 
го, второго, третьего и последующих уровней, записанных в обратном порядке. Напри- 
мер, рассмотрим доменное имя: И. УідеоЕхсһапде . КО: 


• ко — название национального домена верхнего уровня; 
• \У1ЗеоЕхсвапае — название поддомена внутри домена вц, т.с. домен второго уровня; 
• үлт — имя хоста, традиционно так называют У\еБ-сервер. 


Если перевести на человеческий язык, то данное имя говорит о том, что это адрес хос- 
та (компьютера, подключенного к Интернет) с именем МММ, находящегося в домене 
УідеоЕхсһапде. ВИ. 

Итак, чем же система доменных имен облегчила нам жизнь? Исключительно тем, что 
такое символьное имя порой проше запомнить, чем ничего незначащую последователь- 
ность цифр ІР-алреса, потому что доменное имя, как правило, выбирается осмысленно 
и совпадает с названием или аббревиатурой компании, названием проекта или просто с 
фамилией человека, которому принадлежит это доменное имя. Примеры доменных имен: 


• взоне ВО: дез1 дп. ги, уапдех. ги, гЬс.ги; 
е взоне СОМ: пмаскозоЕЕ . сот, атахоп . соп; 


• взоне МЕТ: 2папіе. пес, зоигсеёогде .пек. 


Пока остается открытым вопрос о том, как же регистрируются домены второго 
и младших уровней. Рассмотрим его в конце, когда придет время разместить созданный 
нами МеБ-сайт в сети Интернет. 

Для того чтобы конкретному ІР-адресу поставить с соответствие символьное доменное 
имя, существуют специальные ОМ$-серверы. Они хранят в своей памяти обширную табли- 
цу, в которой каждому доменному имени ставится в соответствие ІР-алрес. И когда в адрес- 
ную строку браузера вводится символьный адрес сайта, т.е. его доменное имя, происходит 
вот что: ОМ$-сервер ишет в своей таблице введенный адрес и находит соответствующий 
ему ІР-алрес. Дальше при отправлении запроса на сервер он подставляет ІР-адрес вместо 
‘указанного символьного доменного имени. Для пользователя этот процесс замены проис- 
холит практически мгновенно и совершенно незаметно. Улобно, не правла ли? 
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Понятие М/еб-страницы и МеЬ-сайта 


МеБ-страницей обычно называют единичный НТМІ -локумент, размеченный при 
помощи языка НТМЕ и предназначенный для публикации в сети Интернет. Набор таких 
МеБ-страниц, связанных общей тематикой, называют УМеБ-сайтом. 

Кажлый отдельно взятый Мер-сайт, как правило, кроме общей тематики, отличает еще 
и общий лизайн. т.е. внешний вид и компоновка страниц. Это позволяет посетителям сайта 
легко на нем ориентироваться, так как страницы похожи внешне, меняется лишь их содер- 
жание, и на всех страницах в идеале одинаковая или похожая система навигации. 


Как создаются НТМЕ-документы 


Итак, мы уже знаем, что такое технология клиент/сервер, как устроена система до- 
менных имен, так как же создать сам НТМІ -локумент? 

Проще всего это сделать в текстовом редакторе. Для начала достаточно булет простого 
Блокнота из операционной системы У/тао\5. Не важно, какую программу будете исполь- 
зовать, главное, чтобы это был простой редактор, а не текстовый процессор, который соз- 
дает сложно форматированные документы, готовые для печати, и хранит их в своем собст- 
венном формате (например, Мога хранит документы в формате . дос). Существуют также 
специальные НТМІ -редакторы — программы, предназначенные для более удобного и бы- 
строго создания НТМЕ-локументов. От их использования лучше пока воздержаться, так 
как страницы, созданные в простейшем текстовом редакторе, лаконичнее, стройнее и наи- 
более оптимальны с точки зрения размера кода, в отличие от тех, что создаются автомати- 
чески НТМІ -релакторами. К примеру, вам наверняка будет приятнее получить вещь, скру- 
пулезно сделанную для вас на заказ мастером, чем приобрести аналог фабричного произ- 
водства, который имеется дома у кажлого второго. 

Но когда вы освоите основные приемы написания НТМІ.-кола в простом текстовом 
редакторе, только после этого можно начинать пользоваться НТМІ.-релактором, чтобы 
упростить и ускорить свою работу. Далее рассмотрим некоторые НТМ! -редакторы и их 
возможности. А для начала давайте остановимся на Блокноте. 

Сначала нужно создать файл на жестком диске компьютера и назвать его, как хочется, 
главное, чтобы название было записано латинскими буквами. Затем сохраните этот файл 
с расширением .ВЕт1 или . Һет, говоря тем самым, что это именно НТМІ -документ. На 
самом деле, пока работаете на жестком диске компьютера, можете давать названия фа! 
лам и на русском языке. Но когда понадобится разместить свое творение на Меб-сервере, 
придется исправлять названия и записывать их латинскими буквами. Чтобы не делать 
двойную работу, переименовывая файлы. давайте сразу привыкать к тому, что названия 
файлам мы будем давать именно в латинице. Назовем наш файл бобогіа1 . Һет] и по- 
местим его в папку НТМг.. Постепенно будем заносить в наш файл информацию, и в кон- 
це получим полноценный НТМІ5 глоҝумент. 


Замечание. Следует иметь в виду, что в июне 2003 году началась регистрация рус- 
| скоязычных доменов в зоне .РУ, а в начале 2004 года и в иных зонах, например 
| „НЕТ, . КОМ и других, поэтому, возможно, скоро эти ограничения в названиях фай- 
| лов будут сняты. | 


Чтобы просматривать результат збы, потребуется ВБ бразер, или просто Ре 
для краткости. В нашем случае подойдет любой, например Іпіегпе! Ехрюгег. Таким обра- 
зом. при создании НТМІ -документа ваш компьютер будет и клиентом, и сервером — вы 
сможете просматривать созданные НТМІ.-документы, как и любые другие файлы на вашем 
компьютере. Для этого в адресной строке надо указать путь к файлу на жестком диске или 
воспользоваться стандартной командой Открыть из меню Файл программы браузера. 
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Как угодить браузеру 


Вообще говоря, несмотря на наличие стандартов и спецификации языка НТМЕ, браузе- 
ры различных производителей могут по-разному отображать один и тот же НТМГ-код. 
Кроме того, разные фирмы-производители браузеров встраивают в них поддержку своих 
собственных элементов и атрибутов, которые не поддерживаются браузерами других про- 
изводителей. 

При создании НТМІ -документа следует учитывать эти особенности таким образом, 
чтобы УеБ-странина. выглядела одинаково в максимально возможном числе ‘браузеров. 
На сегодняшний день лидером по использованию является браузер М5 /тегие! Ехр/огег, 
его доля составляет около 95%. Но не стоит пренебрегать и оставшимися 5%. Тем более 
что браузер Лиегие! Ехрогег, несмотря на свою широкую распространенность, пожалуй, 
хуже всех соответствует стандартам. Кроме того, даже разные версии одного и того же 
браузера имеют свои специфические особенности, например по-разному поддерживают 
каскадные таблицы стилей (С$5), имеют некоторые расхождения в поддержке даже стан- 
дартных элементов НТМ!. Иногда эти расхождения незначительны, но порой встреча- 
ются довольно существенные. 


67 с. ь 
| Предупреждение, Сушествуют различные способы написания так называемого | 
| кроссбраузерного кода, т.е. кода, одинаково отображающегося в разных браузерах, | 

| но порой угодить всем браузерам не удается, как ни старайся. Мы будем а 


| отаких особенностях! по мере ‘изучения материала. 


Пока остановимся на том, что готовый сайт или страницу необходимо тестировать 
как минимум в браузерах М5 /иёегпе! Ехр/огег (МЕ) 5.х и 6.0, Мезсаре №ауіғаіоғ (ММ) 4.х 
и выше, Мога (построен на том же движке, что и Ме1саре №ауірахог), а также Орега 5.х и 
выше. Это самые популярные на настоящий момент браузеры. Нало сказать, что Мо2Ша 
и Орега больше соответствуют стандартам и спецификации НТМЕ, чем два других. Од- 
нако из-за их небольшой распространенности этих браузеров М№еЬ-дизайнеры не могут 
ориентироваться только на их правильную работу, поскольку большинство пользовате- 
лей Интернет предпочитают браузер Іліегпес Ехріогег. Таким образом, перед МеБ- 
дизайнером стоит непростая задача, не только создать красивый сайт, но и адаптировать 
его код под разные браузеры. 

Адаптировать код под разные браузеры можно двумя путями. Первый способ — пи- 
сать код под самый популярный браузер и затем, по мере сил и возможностей, доводить 
его до ума в остальных. Другой подход заключается в том, чтобы изначально писать мак- 
симально правильный и соответствующий стандартам код, тестировать его, например, в 
браузере МогШа, а затем уже подгонять под “неправильные” браузеры. Каким способом 
пользоваться — решать вам. Но прежде чем дело дойдет до написания кроссбраузерного 
кода, надо вообще разобраться с тем, как этот код писать. Я подозреваю, что вы не отли- 
чаетесь от большинства людей, впервые познающих секреты НТМЕ, и скорее всего на 
вашем компьютере установлен только один браузер — \иегпеё Ехріогег. У меня было 
именно так. Давайте договоримся для начала таким образом: пользоваться будем именно 
Ниете! Ехріогег, а по мере надобности я буду приводить примеры с картинками о том, 
какие различия можно наблюдать в других браузерах. 

Итак, перейдем к изучению основ разметки с помощью языка НТМЕ.. 
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Как уже говорилось ранее, язык НТМІ. остановился в своем развитии, так как исчер- 
пал свои возможности, Кроме того, многие элементы НТМЕ были помечены в его спе- 
цификации как нежелательные для использования. В первую очередь это относится к тем 
элементам или их атрибутам, которые не отвечают непосредственно за разметку, а задаюл 
визуальное оформление элементов, например цвет фона или самого элемента. Вы можете 
задать справедливый вопрос: зачем же тогда его изучать, если он больше не развивается? 
Если он не развивается, это не значит, что он умер. Скорее даже у НТМІ. открылось вто- 
рое дыхание с появлением каскадных таблиц стилей. Поэтому не сомневайтесь, время 
зря вы не потратите. Фунламентальные понятия и навыки написания разметки, которые 
вы получите в процессе изучения НТМІ., помогут вам легко перейти на более новые 
и современные языки разметки, которые являются логическим развитием и продолжени- 
ем НТМЕ, предлагают более гибкие инструменты разметки. Но для того чтобы соблюсти 
хронологию развития, начнем разбираться по порядку. Изучение нежелательных для ис- 
пользования атрибутов и элементов позволит нам оценить преимушества современных 
технологий, пришедших на смену чистому НТМІ.. В первую очередь это каскадные таб- 
лицы стилей, которые в прямом смысле могут изменить внешний вид кода, написанного 
на НТМЕ. Технология С$$ предлагает для этого гораздо более широкие возможности, 
чем были заложены в сам язык разметки НТМІ.. 

Итак, приступим к изучению основ разметки. 


Основы разметки. Понятие тега 


Как уже упоминалось ранее, НТМ!. — компьютерный язык, поэтому имеет определен- 
ный синтаксис. Синтаксис — это правила, по которым строятся выражения на этом языке. 
Так сама идея языков разметки относительно нова, сначала был придуман специальный 
язык, называемый 5С МИ. (5їапаағі Сепегайей Мағкир Гапкиаве — Стандартный обобщен- 
ный язык разметки). Создан он был для того, чтобы с его помощью описывать другие языки 
разметки. Одним из них и является НТМЕ. Не пугайтесь, вам не придется изучать еще 


и $ СМУ. Но надо иметь в виду, что НТМЬ был создан с его помошью, т.е. является его 
подмножеством и подчиняется его законам. Это знание пригодится в будущем. 

Теперь вернемся к вопросу создания разметки. Помните заголовок, который упоминался 
в примере 1.1? На всякий случай напомню: Строительная фирма “Дом”. Мы с вами знаем, что 
это заголовок, но нужен способ, которым это можно было бы указать непосредственно в до- 
кументе. Делается это следующим образом (это уже фрагмент НТМІ -кода): 
<Н1> Строительная фирма "Дом"</н1> 


Эту строчку можно разбить на три части. Первая — <Н1>, или так называемый от- 
крывающий тег. Вторая часть называется содержимым элемента, в нашем случае это текст 
заголовка: Строительная фирма "Дом". И, наконец, третья часть — </Н1>, это за- 
крывающий ‘тег. Весь этот элемент целиком называется Н1, что означает заголовок ‘первого 
уровня (1ехе1 1 ћеааіпв). Таким образом, теги нужны для того, чтобы указать, где элемент 
начинается и где он заканчивается. 

Не следует путать понятие элемент и тег, как это часто лелают. Это не одно и то же! 

Тег всегда начинается со знака меньше “<” и заканчивается знаком больше “>”. От- 
крывающий тег содержит название элемента между этими символами (в нашем случае, 
Н1). Закрывающий тег отличается от открывающего только наличием символа слеша “ /” 
перед именем элемента. Вот еще один пример: 
<Н2>Еще один элемент-заголовок, но уже 2 уровня!</Н2> 
<Р>Это тоже элемент. Называется "параграф" .</Р> 
<Р>Бывают элементы, внутри которых находятся <В>другие элементы</В></Р> 
<НВ> 

Если вы внимательно рассмотрели эти примеры, то должны были заметить несколько 
особенностей. Во-первых, элемент В находится внутри элемента р, т.е. можно распола- 
тать одни элементы внутри других при условии, что соблюдается порядок вложенности. 
Таким образом, если какой-либо элемент начался внутри другого, то и закончиться он 
должен внутри него. Например, рассмотрим две строки: 
<Р>Так писать <В>ПРАВИЛЬНО</В></Р> 
<Р>Так писать <В>НЕПРАВИЛЬНО</Р></В> 

Вторая строка написана некорректно, потому что элемент В начался внутри элемента. 
Р, а закончился за его пределами. Для некоторых браузеров, которые “несерьезно” отно- 
сятся к сохранению порядка вложенности элементов, визуально можно и не заметить 
разницы при написании обоих примеров. Но это только при таких простых конструкци- 
ях, как приведенная выше. При создании более сложных конструкций вроде таблиц, если 
нарушить вложенность элементов или не поставить один из закрывающих тегов, резуль- 
тат на экране может оказаться непредсказуемым. 

Во-вторых, вы могли заметить необычный элемент НВ, который не имеет содержи- 
мого и закрывающего тега. Такие элементы, как НВ, называют пустыми. 

Для всех элементов в спецификации языка НТМЕ указано, являются ли открываю- 
щие и закрывающие теги обязательными или необязательными. Закрываюшие теги для 
пустых элементов запрещены. 

Для элемента Р, к примеру, закрывающий тег необязателен, т.е. может отсутствовать. 
Но иногда, если необязательные закрывающие теги пропускаются, то страница приобре- 
тает вид, отличный от того, какой получился бы при использовании обоих тегов. Поэто- 
му на первом этапе рекомендую писать закрывающие теги для элементов, даже если они 
необязательны. Кроме этого, в языке ХНТМЕ, который считается преемником НТМІ., 
обязательно наличие закрываюших тегов у всех элементов, и если вы планируете и даль- 
ше развиваться в этом направлении, привыкайте писать все теги. Это в будущем облегчит 
вам переход с НТМІ на ХНТМЕ. 
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Атрибуты элементов 


Кроме элементов, в языке НТМІ. существует понятие атрибута элемента. Атрибуты за- 
дают для элементов дополнительные неотъемлемые свойства, например выравнивание тек- 
ста на странице для заголовков и параграфов. У разных элементов могут быть свои, харак- 
терные только для них атрибуты. Существуют атрибуты, которые могут применяться к раз- 
ным группам элементов. Указываются атрибуты в открывающем теге, после названия 
самого элемента и до закрываюшей угловой скобки “>”. Отделяются атрибуты от названия 
элемента и друг от друга символом пробела. У каждого элемента может быть несколько ат- 
рибутов. Порядок их следования значения не имеет, если это не оговорено отдельно. 

Любой атрибут состоит из названия и значения. Давайте рассмотрим атрибуты на 
примере элемента Р. Для параграфа, например, характерно выравнивание его относи- 
‘тельно страницы: по левому краю, по центру или по правому краю. Это можно задать так. 
<Р АБТСМ-"СЕМТЕВ"> 
Текст этого параграфа будет выровнен по центру страницы. 
</Р> 

Название атрибута отделяется от его значения знаком равенства само значение бе- 
рется в двойные кавычки. Для каждого атрибута существует значение по умолчанию 
(значение, которое присваивается атрибуту, если оно явно не указано). В данном случае для 
атрибута АГТСМ таковым является выравнивание по левому краю — ключевое слово: гЕРТ. 

Существуют атрибуты, значение которым может быть присвоено произвольным обра- 
зом, например, для ширины или высоты (ИТОНТ и НЕТСНТ) рисунка на страницы. Кроме 
того, имеются атрибуты, значения которым можно присваивать из конечного множества 
значений и соответствующих им ключевых слов — например, значения выравнивания 
текста в параграфе (ЕРТ, СЕМТЕК, ВТСНТ). Булевы (или логические) атрибуты работают 
по принципу выключателя. Им не нужно присваивать никаких значений: если они при- 
сутствуют в теге, значит, определяемое ими свойство установлено, если их нет — свойст- 
во отключено. Рассмотрим пример. 
<НВ МОЗНАОЕ> 


В данном случае имеем дело с пустым элементом НК, задающим горизонтальную раз- 
делительную линию на странице. Атрибут МОЅНАРЕ говорит о том, что эта линия не 
должна быть объемной. Если этот атрибут не будет указан в открывающем теге элемента 
НВ, то линия будет объемной. 

Теперь вы представляете, что такое элемент, тег и атрибут. Мы почти готовы создать 
наш первый документ. 


Основные структурные элементы НТМЕ-документа 


Как уже упоминалось ранее, НТМ1. — полмножество языка 8С МИ. Это означает, что 
любой НТМЕ-документ является также и 5С МІ.-документом. А первый элемент, кото- 
рый в себя должен включать любой 5С МІ -локумент, — это ОТО (Роситет Туре 
Десагайоп — Декларация Типа Документа). Означает это именно то, что и сказано в на- 
звании: Декларация типа документа представляет собой объявление, что этот документ 
будет определенного типа. В нашем случае создаем НТМ!-документ. Не вдаваясь в под- 
робности структуры ОТО, будем использовать следующую деклараци! 


<!РОСТУРЕ НТМ, РОВЫТС *-//МЗС//ОТЬ НТМ 4.0//ЕМ" "Һер: //ммч.м3 .ока/ТЕ/ 
ЕКЕС-һот140/10оѕе.аса">з 


Эта декларация позволяет использовать любые элементы и атрибуты языка НТМЕ. 
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Пусть вас не смущают угловые скобки, это не элемент НТМТ. Если посмотреть вни- 
мательнее, то можно заметить, что декларация начинается с восклицательного знака. Это 
значит, что это $5СМГ-код. Поэтому пока поверьте мне на слово и поместите эту строку 
в начало пока еще чистого документа Соёогіа1 .Һет1. Далее мы обязательно рассмот- 
рим, что означает это ОТЮ-выражение, но проще это будет сделать, когда познакомимся 
со всеми элементами языка НТМІ.. Вы увидите, что с ним все достаточно просто. 

Итак, с помощью декларации типа мы указали, что собираемся создать именно 
НТМІ-документ, и можем начинать добавлять элементы. Первым обязательным эле- 
ментом, который всегда присутствует в НТМ!-документе, есть элемент НТМІ.. Этот 
элемент является корневым, т.е. будет содержать внутри себя все остальные элементы 
НТМІ.-документа. Задав открывающий и закрывающий теги для элемента НТМІ., оста- 
вим его содержимое пока пустым. Получим такой код. 
<!РОСТУРЕ НТМЬ РИВЫТС *-//ИЗС//ртр НТМ, 4.0//ЕМ" "БЕБр: //ммм .м3 .оха/ТВ/ 
ЋЕС-ћЕт140/10оѕе.аєа"> 
<НТМ> 


Все остальные элементы НТМЬ должны располагаться здесь 
</нтмь> 


Открывающий и закрывающий тег и <НТМІ> и </НТМг> являются необязательными, 
т.е. могут отсутствовать. 

Внутри каждого НТМІ.-документа обычно выделяют две части — заголовок и тело до- 
кумента (НЕДР и ВОрү, соответственно), которые задаются соответствующими элемен- 
тами. Заголовок и тело документа — обязательные элементы, которые должны находить- 
ся внутри элемента НТМІ., как и все другие элементы. Запишем эти элементы, и вот пе- 
ред нами структура простейшего НТМ!--документа. 
<10ОСТҮРЕ НТМЬ РУВЬТС "-//ИЗС//Ютр НТМЬ 4.0//ЕМ" "ВЕЕр: //ммм.м3 .ога/ТВ/ 
ВЕС-ВЕп140/1оозе .аЕа"> 
«НТМЬ> 

<НЕАО> 

здесь будут располагаться элементы заголовка документа 
</НЕАО> 

<ВОрү> 


здесь будут располагаться элементы тела документа 
</ворү> 
</нтмі> 


Обратите внимание, что мы использовали отступы для тегов элементов НЕАР и ВОБУ. 
Никакого определенного смысла это не имеет, мы лишь хотим подчеркнуть структуру 
вложенности элементов, чтобы лучше ее запомнить. Излишние пробелы, символы табу- 
ляций и тому подобное игнорируются в НТМТ-коде, т.е. можно ставить их сколько угод- 
но, чтобы сделать код более удобночитаемым, при этом смысл самого документа не из- 
менится. Приведенный выше фрагмент кода будет совершенно аналогичен такому: 
<!РОСТУРЕ НТМЬ РОВЫТС "-//МЗС//ОТр НТМ, 4.0//ЕМ" "Һер: / /мми. м3 .ока/ТВ/ 
КЕС-ћп140/10оѕе.аєа"><НТМІ><НЕАр>здесь будут располагаться элементы заголовка 
документа</НЕАТ><ВОБУ>здесь будут располагаться элементы тела докумен- 
та</ВОрү></НТМІ> 

В этом фрагменте нет никаких лишних переводов строк (кроме тех, которые получи- 
лись из-за физического ограничения размера листа бумаги), пробелов или знаков табу- 
ляции между элементами. Но тем не менее оба фрагмента при интерпретации их браузе- 
ром будут выглядеть совершенно одинаково. 

Язык НТМІ. также не зависит от регистра, т.е. название элементов можно писать как 
заглавными, так и строчными буквами. Варианты написания названий элементов НЕАР, 
Ћеаа и Неда будут равносильны. Но пока будем придерживаться такого правила: назва- 
ния элементов будем писать заглавными буквами, атрибуты и содержимое элементов — 
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строчными. На первых порах так будет легче ориентироваться в НТМ! -коде и выделять 
в тексте элементы языка НТМІ... 

Итак, в заголовке документа содержится в основном служебная информация о самом 
документе, тогда как тело документа содержит непосредственно сам документ (текст, ри- 
сунки и прочие элементы). 

Прежде чем переходить к телу документа, остановимся чуть подробнее на элементе, 
который должен содержать заголовок документа. Это элемент ТТТЬЕ — название доку- 
мента. Это очень важный элемент. Он характеризует документ и должен делать его в сво- 
ем роде уникальным. Вернемся к примеру 1.1: название Строительная фирма “Дом”, воз- 
можно, не говорит о многом и не очень точно передает суть документа. Тогда, чтобы 
конкретизировать название, можем написать так: Строительная фирма “Дом”: о нас. 
Кроме того, надо помнить о том, что именно содержимое элемента ТТТЬЕ в окне браузе- 
ра будет помешено в строку заголовка окна. Записать название очень просто: 
<!0ОСТҮРЕ НТМ РОВЦІС *-//МЗС//ОТО НТМ 4.0//ЕМ" 

"Ђер: //мми .м3 .ога/ТК/КЕС-ћл140/100ѕе.аса"> 
<НТМЕ> 

<НЕАО> 

<ТТТЬЕ> Строительная фирма "Дом": о нас</ТТТЬЕ> 

</НЕАр> 

<вору> 

</вору> 
</нтм> 

Ну вот, почти готово, осталось только добавить тело документа. 

Уже сейчас, если сохранить то, что получилось, и открыть документ сисогіа1 . Һет 
для просмотра в браузере, то увидим пока только пустой экран, но в строке заголовка ок- 
на браузера уже должно быть указано название первого НТМ!-документа. Надеюсь, 
у нас все получилось! 


Заголовок документа — элемент НЕАО 


Заголовок содержит неупорядоченную служебную информацию о документе — на- 
пример, название документа; ключевые слова, по которым поисковая машина может ин- 
дексировать документ; информацию о кодировке, в которой написана страница; и дру- 
гую специфическую информацию. Вся эта информация содержится внутри элемента 
НЕА. Она не влияет на внешний вид документа, а только предоставляет браузеру поль- 
зователя необходимые сведения о документе. 

Пока хотелось бы только упомянуть об элементах, которые могут располагаться в заго- 
ловке, и объяснить их основное назначение. Подробнее к применению каждого из них уме- 
стнее будет вернуться в тех разделах, к которым они имеют непосредственное отношение. 

Внутри элемента НЕАР могут содержаться такие элементы: 


® <ВАЅЕ> — позволяет задать базовый адрес (ОК!) для всего документа; 
® <ВАЗЕРОМТ> — позволяет установить шрифт для документа; 
• <ы1мКк> — устанавливает связи с другими элементами; 


*® <МЕТА> — содержит информацию, необходимую браузеру пользователя или сер- 
веру для обработки документа; 


• <ЗТУШЕ> — используется для описания внутренних таблиц стилей; 
• <ТЕТЬЕ> — залает название локумента. 


Все элементы, кроме ТІТІЕ и $ТУБЕ, являются пустыми. У них отсутствуют солержание 
и закрывающий тег. Необходимые параметры задаются при помощи атрибутов элементов. 
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Пример 2.1. Код заголовка документа 


<НЕАр> 
<ТТТЬЕ>Строительная фирма "Дом": о нас</ТЕТЬЕ> 
<ВАЗЕ НкеЕ="ВЕЕр: / /ммм .Боок-ка/"> 
<МЕТА НЕЕр-едизу="Сопеепе-Туре" сопіепе="бех/Һет1; сһагѕес=уіпдоиѕ-1251"> 
<МЕТА папе="Кеумогіѕ" 1апд="ки" сопкепе="строительство, материалы, магазин“> 
<ЫІМК ке1="зЕу1евнеее" буре="Бехб/сәв" ҺгеЁ="=бу1е.сѕѕ"> 

</НЕАР> 

В данном примере задаются: название документа Строительная фирма "Дом" 
о нас; базовый ОКІ. — ВЕЕр: / /мим .ЪооК .га/; тип кодировки, в:которой написан до- 
кумент, — млпаомв-1251; ключевые слова — строительство, материалы, мага- 
зин; кроме того, подключен внешний файл с каскадной таблицей стилей збу1е. с=з. 

Для чего служит название страницы, мы уже упоминали. Оно отображается в строке за- 
головка окна браузера. Чем нам поможет задание базового ОКІ., станет понятно позднее, 
когда будем рассматривать ссылки и добавление на страницу мультимедийной информа- 
ции. Пожалуй, чуть подробнее сейчас стоит остановиться на кодировке и ключевых словах. 

Вы наверняка знаете, что существуют так называемые поисковые машины, или поис- 
ковые серверы. Вы заходите на страницу, заносите в форму поиска свой вопрос, и поис- 
ковая машина через некоторое время выдает результаты поиска. Результатом является 
список страниц или даже целых сайтов, в тексте которых встречается фраза, которую вы 
задали в строке поиска. 

Специальные программы — поисковые роботы — просматривают все доступные им 
сайты и собирают с них информацию. Этот процесс называется индексацией страниц. 
После этой процедуры робот отсылает собранные сведения поисковой машине, которая 
теперь знает, о чем рассказывается на сайте, и заносит эту информацию в свою базу дан- 
ных. Именно к этой базе данных выполняется запрос при вводе строки для поиска. Тео- 
ретически, чем чаще на странице встречается поисковая строка, тем выше эта страница 
будет в результатах поиска. На практике на позицию в результатах поиска оказывает 
влияние множество различных факторов. 

Для того чтобы облегчить поисковым роботам индексацию страницы, можно подска- 
зать им основные мысли, содержащиеся на странице. Делается это указанием ключевых 
слов в заголовке документа примерно такой строкой: 
<МЕТА папе="Кеуногӣѕ" Іапо="ги" сопбепе="строительство, материалы, магазин, 
стройматериалы, .."> 

Ключевые слова — это слова или словосочетания, которые отражают самую важную 
(ключевую) информацию, изложенную на странице. Задаются они при помощи элемента 
МЕТА, которым пользуются и в других случаях. В нашем примере элемент МЕТА исполь- 
зовался дважды — для задания ключевых слов и для указания кодировки. 

Чтобы указать на то, что в данном элементе МЕТА будут указаны именно ключевые 
слова, задается атрибут пате= " кеумогаѕ" . Далее идет атрибут 1апо=" ги", говорящий 
о том, что ключевые слова будут на русском языке. Языки указываются при помощи спе- 
циальных кодов. Коды языков формируются из первичного кода, обозначающего язык, 
и подкода, определяющего страну применения языка. Подкод может быть пустым и от- 
деляется от кода дефисом. Вот несколько примеров кодов языков: 


® "еп": английский; 

® "еп-05": американская версия английского; 
е "гы": русский; 

® "Ес"; французский. 


32 — Часть 1. НТМЕ 


Задание этого атрибута позволит поисковой машине определить, на каком языке на- 
писаны ключевые слова. И индексация страницы будет выполнена быстрее. 

В последнем атрибуте сопсепе задаются сами ключевые слова, разделенные запятой. 
Список ключевых слов может быть сколь угодно длинным, но не забывайте, что слиш- 
ком длинный список значительно увеличит размер файла. Поэтому постарайтесь в не- 
скольких словах охарактеризовать содержание страницы. 

Если даже вы не укажете ключевых слов, то страница все равно будет проиндексиро- 
вана. Также следует заметить, что с помощью многократного повторения одного слова в 
качестве ключевого не удастся поднять рейтинг своей страницы в поисковой системе. 
Робот отслеживает недобросовестно написанные ключевые слова, и, если оно совсем не 
встречается в основном тексте страницы, он его просто игнорирует. Так что будьте чест- 
ными перед собой и поисковым роботом. 

Теперь несколько слов о кодировках. Думаю, ни для кого не секрет, что компьютер 
понимает очень простой двоичный язык, буквы которого специалисты обозначили как 0 
и 1. Физический смысл этих символов крайне прост: “0” — нет сигнала, “1” — есть сиг- 
нал. Причем неважно, какой именно это сигнал — наличие магнитного поля, электриче- 
ского заряда, дырка в перфокарте и т.д. Любая информация. которая хранится на элек- 
тронных носителях, кодируется при помощи этого двоичного алфавита. В том числе и 
текст. Исторически так сложилось, что для кодирования русских букв в машинном пред- 
ставлении было разработано несколько способов (несколько вариантов кодировки). Ка- 
жлый способ кодировки можно представить как табличку, в которой каждой букве рус- 
‘ского алфавита, как строчной, так и заглавной, поставлен в соответствие некоторый код. 
(последовательность 0 и 1), которым эта буква представляется в компьютере. Первая ко- 
дировка использовалась в Утх-системах, назвали ее КОЇ8-К, другая в среде Міпӣоуѕ, 
поэтому и называется УИпво\5-1251, существуют и другие. Таким образом, если текст, 
записанный при помощи одной кодировки, попытаться прочитать при помощи другой, 
то увидите беспорядочный набор русских букв, упорно не желающий складываться в по- 
нятные слова. 

Указывая в коде своей страницы способ кодировки вот такой строкой: 
<МЕТА ҺеЕр-есиіу="Сопсеп -Түре” сопхепЕ="сехе/ВЕт1; сћагѕес=иіпдонв-1251"> 


вы тем самым заставляете браузер использовать именно ее. Тогда, например, те, кто 
пользуется другой кодировкой, увидят на своем экране набор непонятных символов. 
Согласитесь, это не очень удобно. Но все же, если вдруг встретите страницу в неправиль- 
ной кодировке, то ее можно легко исправить. Способ кодировки для документа можно 
выбрать в меню браузера Вид, команда Кодировка. Там есть как минимум два варианта 
кодировки для кириллицы, о которых мы уже упоминали: КО!8-А и М/іпдомѕ. 

Сервер в состоянии самостоятельно определить кодировку на компьютере пользова- 
теля и выдать результат автоматически в нужном виде. Так что можно сэкономить на на- 
писании кода, и пользователям от этого будет только удобнее. 

Элемент НЕАР — только верхушка айсберга, самое интересное у нас впереди. Перей- 
дем к изучению самой объемной части НТМІ -документа — его телу, т.е. элементу ВОрү. 
В нем-то и располагается основная информация, которую пользователь видит на МеБ- 
странице. 


Тело документа — элемент ВОБУ 


В элементе вору должен содержаться весь текст и рисунки, составляющие НТМІ- 
страницу, вместе с другими элементами, определяющими внешний вид этой страницы. 
Атрибуты элемента ВОрү задают параметры оформления для всего документа: цвет фона 
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и фоновый рисунок, цвет текста на странице, цвета фрагментов текста, которые будут 
ссылками на другие фрагменты или документы. 

Фон МеБ-страницы может быть заполнен как однотонной заливкой произвольного 
цвета, так и некоторым изображением, которое наподобие кафельной плитки будет за- 
стилать всю ее видимую поверхность. Фоновое изображение должно обладать таким 
свойством: его рисунок при стыковке боковых сторон должен образовывать целостную 
картину. От размера изображения будет зависеть количество его повторений на экране. 
Например, картинка размером 100 х 100 пикселей на экране с разрешением 800 х 600 по- 
вторится 8 раз по горизонтали и б таких рядов будет расположено по вертикали. Картин- 
ка размером 800 х 600 при таком разрешении повторяться не будет. Но имейте в виду, что 
файл, содержащий фоновую картинку, имеет свой размер. Пользователь, прежде чем 
‘увидеть изображение, должен будет подождать, пока этот файл загрузится. Поэтому при 
использовании фонового изображения лучше отдавать предпочтение небольшим по раз- 
меру картинкам либо использовать однотонную заливку. Если вы все же решите добавить 
фоновую картинку, то задайте и однотонную заливку, максимально близкую по цвету к 
фоновому изображению. Пользователь увидит фоновую заливку сразу же, как только 
браузер получит код элемента ВОБУ, а когда загрузится и файл с фоновым изображением, 
оно ляжет поверх однотонной заливки. 

Формат графического изображения тоже важен. Для использования на М№еђ-страницах 
подходят только три формата графических файлов: ЈРЕС, СІР и РМС. Все три формата 
представляют собой реализацию алгоритмов сжатия изображений с целью уменьшения 
размера графических файлов для сокращения времени их передачи. Предпочтение лучше 
отдать первым двум форматам. Подробнее о различиях и назначении этих форматов гово- 
рится в разделе “Особенности графики для М№еБ" главы 18. Пока скажу только, что формат 
ЈРЕС реализует алгоритм с потерей качества и больше подходит для хранения фотографий, 
где присутствует большое количество цветов и плавных переходов от одного цвета к друго- 
му. Изображение в формате СТЕ не может содержать более 256 цветов, поэтому лучше под- 
ходит для рисунков с большими областями, закрашенными одним цветом, — сжатие таких 
рисунков происходит практически без потерь. Кроме этого, изображения в формате СЛЕ 
могут иметь так называемый прозрачный цвет, сквозь который могут просвечивать фон 
страницы или другие ее элементы. Формат СИЕ поддерживает и анимированные картинки. 

Формат РМС реализует алгоритм без потерь качества, подходит и для фотографических 
‘изображений, и для рисунков с небольшим количеством цветов, поддерживает прозрачный 
цвет, но не умеет хранить анимацию. Однако размеры файлов изображений при сравнимом 
качестве значительно превосходят аналогичные в форматах ЈРЕС или С!Е. Тем не менее, 
если нужно разместить фотографию на прозрачном фоне, без формата РМС не обойтись. 

Как же в НТМЕ задается фоновый цвет страницы и цвета других элементов? Сущест- 
вует два основных способа задания цвета: по имени или указанием шестнадцатеричного 
кода цвета. С именными цветами все просто. Существует 16 основных именных цветов 
(которые изначально поддерживал браузер Іп(егпе! Ехріогег) и еще 140 дополнительных 
(изначально поддерживал браузер Месаре М№ауіра‹ог) (смотрите их полный перечень 
в приложении). Теперь оба списка поддерживаются новыми версиями браузеров одина- 
ково. Приведем лишь 16 основных именных цветов: 


• черный — Маск; е темно-зеленый — вгееп; 
• темно-синий — пауу; »® сине-зеленый — іеаі; 

® светло-серый — зЙуег; »® зеленый — Ите; 

• синий — Ыџе; • бирюзовый — адиа; 
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• малиновый — тагооп; 


оливковый — оНу\е; 
• пурпурный — ригріе; • темно-серый — вгау; 
• красный — гед; • желтый — уеПом; 

• розовый — Ѓисһѕіа; белый — Вне. 


В том случае, если этих цветов окажется недостаточно, можете задать любой из мил- 
лиона цветов, указав его шестнадцатеричный код. Этот код представляет собой 6 цифр, 
кодирующих требуемый цвет в модели ВСВ, и начинается с символа решетки “#”. На- 
пример, код белого цвета — #ЕЕЕЕЕЕ, а черного — #000000. Подробнее о том, как фор- 
мируется код цвета, мы узнаем в главе 18, “Графика для Интернет”. 

В табл. 2.1 приведены основные атрибуты, существующие для элемента вору. 


Таблица 2.1. Основные атрибуты элемента ВОрү 


‘Атрибут Описание Значение Пример 

васкагоцпа Задает фоновое изображение ИВ! Баскагошпа = "іпаде.діё" 
Вдсо1ог Задает цвет фона цвет Басојог="иһібе" (НЕЕЕЕРЕЕ) 
Техе Задает цвет текста документа цвет Сехё="Ь1аск" (#000000) 
ТАк, у1іпк, Задает цвет обычных, посе- цвет 1іпк= "Ъ1џе" (#0000РЕ) 
а1іпк щенных, активных ссылок а13пк="кеа” (#220000) 


Уу1іпк= "ригр1е" (#800080) 


Давайте рассмотрим пример кода элемента ВОру: 
<ВОБУ Ьдсо10; 
а1іпк= 
"гед" у1іпк="ригр1е"> 
Здесь будут располагаться остальные элементы НТМЬ-кода со своим содержимым 
</вору> 


#000000" 14пк="Ы1 ше" 


мћі се" Баскагошпа-"іладе. сіє" сех 


Этот код задает белый цвет для фона страницы. Фоновое изображение берется из файла 
ітаде. сі, который находится в том же каталоге, что и основной НТМІ.-документ. Цвет 
текста устанавливается черным. Цвет простых ссылок (когда к ним не подведен курсор 
мыши) — синий, цвет активных ссылок (при щелчке мыши на ссылке) — красный, а цвет 
посещенных ссылок (ссылки на страницы, которые вы уже посетили) — пурпурный. Сле- 
дует отметить, что все параметры. привеленные в этом примере, кроме фонового изображе- 
ния, являются значениями по умолчанию. По умолчанию фоновое изображение отсутству- 
ет совсем. Это означает, что если бы вы использовали такой код: 
<ВОрү Ъаскогоцпд=" ілаце.сіє"> Здесь будут располагаться остальные элементы 
НТМІ-кода 
со своим содержимым 
</вору> 
то результат был бы таким же. Единственное, что следует дополнительно отметить, — 
возможность задать фоновый цвет страницы в самом браузере. И если он по умолчанию 
установлен, например, серым, то и фон страницы тоже окажется серым. Явное же указа- 
ние цвета фона белым гарантирует, что он будет белым независимо от того, какой цвет 
задан в браузере пользователя как фоновый. 

Различные цвета для простых, активных и посещенных ссылок были введены для 
большей наглядности и простоты ориентации на МеБ-сайте. Например, различные 
фрагменты текста могут ссылаться на одну и ту же страницу, но цвет посещенной ссылки 
даст понять, что вы ее уже открывали и знакомы с ее содержимым. Это избавит от лиш- 
них неудобств и повторного закачивания страниц на ваш компьютер. Кроме того, вы 
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просто будете знать, какие страницы вы уже посетили, а какие еще нет. Цвет посещенной 
ссылки обычно делают менее ярким и насыщенным, чем цвет обычной ссылки. 

Итак, если хотите, чтобы цвета на странице отличались от тех, что задаются по умол- 
чанию, следует указать их явно в соответствующих значениях атрибутов элемента ВОБУ. 
Для нашего документа укажем такие: 
<ВОрү Басо1ог="ИпеаЕ" Бехе="Ь\аск" Іїпк="РігеБгіск" а1іпк="гей" 
у1іпк="Ѕіеппа"> 
</ворү> 

После того как внесете необходимые изменения в файл босогіа1 .Һот1, получите 
пшеничный фон, текст будет черным, ссылки кирпичными, активные ссылки — крас- 
ными, а посещенные будут отображаться цветом охры. Цвет активных ссылок мы в дан- 
ном случае могли пропустить, так как красный — значение по умолчанию, но все-таки 
запишем его для наглядности явным образом. 

Главное правило, которым нужно руководствоваться при выборе цвета фона и ивета 
текста, — они должны быть достаточно контрастны, чтобы текст на этом. фоне легко чи- 
тался и посетителям сайта не приходилось бы напрягать зрение. Не используйте раздра- 
жающих сочетаний, таких как ядовито-зеленый текст на черном фоне или красный текст 
на зеленом. Хотя и говорят, что о вкусах не спорят, тем не менее существуют классиче- 
ские сочетания “черным по белому”. Главное, пользуйтесь довольно широкими возмож- 
ностями задания цветов с умом. Тогда они будут раловать и вас и ваших посетителей. 


Комментарии 


Когда возникает необходимость добавить некую информацию в документ, которая не 
должна восприниматься как основной код, пользуются комментариями. Информация 
в комментариях не имеет специального значения и не воспринимается как НТМІ-код. 
Используются чаще для пояснений, например, когда над кодом работают несколько че- 
ловек или когда необходимо временно исключить некий фрагмент кода из обработки, не 
‘удаляя его совсем, — можно заключить такой фрагмент в комментарий, после чего он бу- 
дет игнорироваться браузером. 

Комментарии в НТМІ имеют следующий синтаксис: 
<!-- текст комментария --> 


Восклицательный знак после угловой скобки означает, что это уже не НТМІ.-код. 
Комментариями можно пользоваться для того, чтобы отметить ключевые моменты в 
НТМЕ-коде, чтобы легче было в нем ориентироваться и вам, и тем, кто после вас будет 
‘редактировать код. Например: 
<«НТМЬ> 
<!-Далее идет код заголовка документа -- 
<НЕАО> 
</НЕАр> 
<!-Далее идет код тела документа --> 
<ворү> 
</ворү> 
</нтмь> 


Оформление текстовых блоков 


Вот мы и подошли вплотную к оформлению основного содержания МеБ-страницы. 
С самого момента основания Мота Мійе Мер текст и ссылки составляли основу любого 
документа, и лишь позднее в них стали добавлять графическую информацию. Потому 
вязыке НТМЬ существует много средств разметки текста. Вспомним наш пример 1.1. 
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‘Строительная фирма “Дом” 

Фирма “Дом” образовалась в 1998 году и с тех пор занимает лидирующее место на 

рынке строительства и отделочных материалов. 

Фирма имеет сеть магазинов и торговых залов, расположенных в разных районах го- 

рода. В них вы можете найти все для вашего дома, начиная с отделочных материалов 
‚ и заканчивая мебалью и аксессуарами. 


Заголовки — элементы Н1-Нб 


В нашем фрагменте текста из примера присутствует один заголовок и два параграфа. 
В НТМЕ существуют специальные элементы, чтобы их описать. НТМІ. поддерживает 
6 уровней заголовков. Можно воспользоваться любым из них, в зависимости от смысла, 
который вкладывается в заголовок. Они представлены соответственно элементами: н1, 
Н2, НЗ, НА, Н5 и нб (Неа@т8з). Первый — самый главный, отображается более крупным 
шрифтом, шестой — самый маленький и по значению, и по размеру шрифта. 
На следующем примере можно рассмотреть в действии многоуровневую структуру 
заголовков: 
<Н1>Военный Устав</н1> 
Предлагаем к рассмотрению Устав Военных Вооруженных Сил. 
<Н2>Пункт Первый</Н2> 
Командир всегда прав! 
<Н2>Пункт Второй</Н2> 
Если командир не прав, смотри пункт первый. 
Таким образом, заголовки первого уровня будут отображаться самым крупным шриф- 
том, а заголовки 2, 3 и последующих уровней будут постепенно уменышать свой размер. 
Выглядит это примерно так. 


Заголовок 2 


Заголовок $ 
Заголовок 4 
Заголовок 5 


Рис. 2.1. Вид заголовков различных 
уровней в окне браузера 


По умолчанию текст заголовка выравнивается по левому краю страницы. Но можно 
отцентрировать заголовок либо выровнять его по правому краю, указав атрибут 
а1ідп= "1еёє | сепсе | гісће". Символ вертикальной черты * |” в данном случае озна- 
чает “или”. Расшифруем значения ключевых слов: 

е 1еЕЕ — выравнивание по левому краю; 

• сепЕег — выравнивание по центру; 
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® г1арЕ — выравнивание по правому краю; 
• јоѕсіғу — выравнивание по ширине. 


Параграфы (абзацы) — элементР 


Теперь вернемся к нашему примеру. Осталось оформить еще два абзаца текста. Для этого 
вНТМЕ существует элемент Р (Рагаргарћ). Выравнивание абзацев осуществляется аналогично 
выравниванию заголовков, заланием атрибута а119т="1еЕЕ | сепбег | гісће | јиѕбі ғу". 
Рассмотрим пример. 
<Р>Тег параграфа используется для определения блока параграфа текста 
{по умолчанию выровнен по левому краю) .</Р> 


<Р а1ісп="сепбег">Это будет уже второй параграф, и выровнен он будет 
по центру</Р> 


Текст, помещенный внутрь элемента Р, отделяется от остальных элементов на стра- 
нице абзацными отступами: перед абзацем и после него. Можете провести эксперимент и 
посмотреть, как будет выглядеть в окне браузера текст, написанный просто (абзацных 
отступов не будет), и фрагмент текста, помещенный вслед за ним внутрь элемента Р 
(отступы будут). Убедимся, поместив такой код в НТМІ -документ: 
<НВ> 
Текст, расположенный за пределами элемента Р, НЕ ОТДЕЛЯЕТСЯ отступом 
от горизонтальной разделительной линии. 
<НА> 
<Р>Текст, помещенный внутрь элемента Р, ОТДЕЛЯЕТСЯ отступом от горизонтальной 
разделительной линии. </Р> 


Выглядит это так: 


Текст, расположенный за пределами элемента Р, НЕ ОТДЕЛЯЕТСЯ отступом от 
горизонтальной разделительной лини: 


Текст, помещенный внутрь элемента Р. ОТДЕЛЯЕТСЯ отступом от горизонтальной 
разделительной линин. 


Рис. 2.2. Абзацные отступы для элемента Р 


При этом размер абзацного отступа в браузерах Мога и Орега будет чуть меньше, 
чем в Нисте! Ехрюгег. Здесь правильнее было указать конкретные версии браузеров, но 
сути это не изменит, отступы разные. Исправить ситуации средствами НТМІ. нельзя. 
Приходится смириться, хорошо, что дефект не настолько существенный. 

Давайте разметим заголовок и параграфы нашего примера с помощью соответствую- 
щих элементов. Отцентрируем заголовок и поместим эти элементы в тело нашего доку- 
мента Ецсогіа1 .Һіт1. Получим код, который надо поместить между открывающим 
и закрывающим тегами элемента Ворү: 
<Н1 а1іс̧п=*сепбег"> Строительная фирма “Дом"</Н1> 
<Р>Фирма "Дом" образовалась в 1998 году и с тех пор занимает лидирующее место 
на рынке строительства и отделочных материалов. </Р> 
<Р>Фирма имеет сеть магазинов и торговых залов, расположенных в разных рай- 
онах 


города. В них Вы можете найти все для вашего дома, начиная с отделочных мате- 
риалов и заканчивая мебелью и аксессуарами. </Р> 
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Вот и все! У нас получился корректно оформленный НТМІ -документ! Телерь можно 
немного передохнуть и полюбоваться, как браузер отобразит написанный нами код. Это, 
конечно, не вершина дизайнерского искусства — по многим причинам, но начало поло- 
жено. То, что мы с вами успели узнать, пригодится при создании любой \еЬ-страницы. 


Контейнеры — элементы ОУ и РАМ 


В НТМЕ существует специальный элемент Оту, который может служить контейнером 
для любых других элементов НТМ!.. Элементы, помещенные внутрь тега рту, отделяют- 
ся от остального содержимого страницы абзацным отступом. С помощью атрибута 
а119п можно задавать выравнивание содержимого контейнера. Например, если мы захо- 
тим для целой группы элементов задать выравнивание по центру, то можно сделать это, 
поместив их внутрь контейнера и задав выравнивание для всего контейнера в целом. а не 
для каждого его элемента отдельно. 

«ІУ а1зап="сепкег"> 

<Н1> Заголовок 1 </Н1> 

<Н2> Заголовок 2 </Н2> 
<НЗ> Заголовок 3 </НЗ> 
<Н4> Заголовок 4 </Н4> 
<Н5> Заголовок 5 </Н5> 
6 


<Нб> Заголовок 6 </Нб> 
<0Іу> 


Все заголовки будут выровнены по центру страницы. Это дает нам некоторые удобст- 
ва и экономию в написании кода, а соответственно, и размер файла булет меньше. 

У контейнеров есть и лругие области применения. Например, при использовании 
каскадных таблиц стилей и элемента Оту можно создавать блоки, задавать для них уни- 
кальные параметры оформления и позиционировать их на экране в нужное место. Но об 
этом немного позднее. 

Элемент ЅРАМ, в отличие от элемента рту, создает строчной блок. С его помощью 
можно выделить некоторый фрагмент текста и потом задать для него своеобразное 
оформление при помощи каскадных таблиц стилей. 

Как задать стили оформления лля различных структурных и строчных блоков, разбе- 
рем позже, когла перейдем к изучению С55. 


Форматирование текста 


При работе с текстами в НТМЕ. доступны многие средства, к которым вы привыкли 
при форматировании текста в текстовом редакторе. Можно задавать шрифт, регулиро- 
вать его размер и даже управлять отступами и интервалами. Но некоторые функции ста- 
новятся доступными только при совместном использовании НТМІ и С55. Сейчас пого- 
ворим о возможностях чистого НТМІ.. 

Давайте несколько минут уделим шрифтам и базовым типографским понятиям. 

Шрифт (нем. с/г) — в полиграфии комплект литер, воспроизводящий какой-либо 
алфавит (латинский, русский, арабский, греческий и др.), а также цифры и знаки. 
Шрифты различаются характером рисунка (ВЕЕр: / /меда.Кт.га/Без_98/епсус1ор. 
азр?Торіс=боріс_даг83), наклоном (прямой, курсив), насыщенностью (светлый, по- 
лужирный, жирный), размером (ВЕЕр: / /шеда.Кт.ка/Ъез_98/епсус1ор.авр?Тор1с= 
Еорас_Куак74) 

Начертание шрифта — комбинация наклона и насыщенности. Начертание бывает 
обычное, курсивное, полужирное, полужирное курсивное ит.д. 
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Гарнитура шрифта — характеризует рисунок шрифта. В гарнитуре шрифты могут отли- 
чаться размером (ВЕЕр: / /педа .Кп.ги/реѕ 98/епсус1ор.аѕр?Тторіс=соріс Куаг74), 
начертанием (прямой, курсив и др.), насыщенностью (светлый, полужирный и др.). 

Кегль (размер) — в полиграфии размер шрифта, включающий высоту буквы и за- 
плечиков (свободные пространства над и под буквой). Измеряется в пунктах (пт); 
1 пункт = 0,3759 мм (1/72 дюйма). 

Все шрифты делятся на несколько больших групп или семейств. 


• 5е//— шрифты с засечками, такие как Тітеѕ Ме\ Котап, которым написана эта 
книга. 


• Ѕапѕ-ѕегії — шрифты рубленые, без засечек, такие как Апа1, Уетдапа и Таһота. 


• Мопозрасе — моноширинные шрифты (с одинаковым расстоянием между симво- 
лами, наподобие печатной машинки), такие как Соџгіег №ем. В этой книге моно- 
ширинным шрифтом набраны НТМЕ--коды. 


® Сигяуе — шрифты курсивные, такие как Сајіѕіо МТ. 


• Ғапіаѕу — декоративные шрифты, буквы которых могут имитировать, например, 
рукописный текст. 


Вот примеры внешнего вида таких шрифтов. 


Шрифты с зассчками: 
Тітеѕ Меуу Котап 
Рубленые шрифты: 
Апаі 
Таһота 
Мегдапа 
Мопоширинные шрифты: 
Соџгіег Нем 
Қурсивные шрифты: 
Сайѕяо МТ 
Декоративные шрифты: 
пама» 
САЗТЕНАВ 


енумюко- 
Моны 


Рис. 2.3. Примеры шрифтов различных 
семейств. Сравните внешний вид букв 


Визуальную привлекательность шрифтов обычно оценивают на специальных фразах- 
панграммах, которые содержат все буквы алфавита. Для каждого языка они, естественно, 
свои. В приложении А вы найдете несколько панграмм для русского и английского языков. 

Сразу хочется оговориться, несмотря на то что сейчас существует возможность встро- 
ить в НТМЕ-страницу практически любой шрифт, лучше всего использовать только 
стандартные, которые устанавливаются вместе с операционной системой (Тітеѕ М№еу 
Котап, Ала!, Уегдапа и Таһота). Это гарантирует, что документ сможет просмотреть без 
помех любой пользователь Интернет. Если будете использовать шрифт, которого не ока- 
жется у пользователя, то браузер автоматически заменит его на более близкий к исходно- 
му и доступный шрифт, и ваши старания пропадут зря. Собственно, фактически только 
вы и сможете насладиться визуальной привлекательностью экзотического шрифта. Но 
вы ведь делаете Меб-страницу не для себя, а для других. Поэтому позаботьтесь о том, 
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чтобы они видели то же, что видите вы. В графическом дизайне можно использовать лю- 
бые шрифты, так как результат вставляется на страницу в виде рисунка, и у браузера не 
возникнет проблем с его отображением. 


Начертание шрифта 


В НТМЕ фрагмент текста, начертание которого хотите изменить, следует поместить 
внутрь соответствующего элемента — эти элементы приведены в табл. 2.2. 


Таблица 2.2. Элементы НТМ(, задающие начертание шрифта 


Тег Начертание Пример Результат 

в Полужирное <В>полужирное</В> Полужирное 

1 Курсив <І>курсив</1> Курсив 

5 Зачеркнутый <5>зачеркнутый</5> Зачеркнутый 
у Подчеркнутый <0>подчеркнутый</0> Подчеркнутый 


Думаю, что дополнительные примеры и пояснения здесь будут излишни. 
Если хотите получить комбинацию начертаний, то следует поместить один элемент 
внутрь другого. 


<В><І>Полужирный курсив</1></В> 
<В><0>Полужирный подчеркнутый< /0></В> 


Комбинаций может быть много. Помните главное правило: если элемент начинается 
внутри другого, то и заканчиваться он должен внутри него. 


Совет. Чтобы избежать подобных ошибок, лучше сразу набирать оба тега элемента: 
открывающий и закрывающий, а потом уже между ними вводить само содержимое 
элемента. 


Управление шрифтами и их размером 


Для управления шрифтом и его размером существует одноименный элемент РОМТ (от 
англ. шрифт). Его атрибуты (табл. 2.3) позволяют задать гарнитуру, размер и цвет шрифта. 


Таблица 2.3. Атрибуты элемента ҒОМТ 


Атрибут Описание Значение Пример 
ѕіге Задает размер шрифта 1-7 віте="значение" 
(по умолчанию равен 3) 
со1ог Задает цвет текста цвет со1ог="#кгааьЬ" 
Ғасе Задает гарнитуру гарнитура Еасе="паше [ ‚ паме] [, пате] " 


Давайте разбираться по порядку. Шрифт в НТМЕ. может быть определенного размера — 
от 1 до 7. По умолчанию размер шрифта равен 3. Если хотите задать другой размер для всех 
элементов на странице, то нужно это сделать с помошью элемента ВАЅЕҒОМТ в заголовке 
документа НЕАР, добавив такую строку: <ВАЅЕЕОМТ ѕіте="5 ">. Тогда размер всего текста 
на странице увеличится на 2 единицы, а код заголовка станет таким: 
<НЕАО> 


<ТТТГЕ> Строительная фирма "Дом": о нас</ТТТЬЕ> 
<ВАЗЕРОМТ 512е="5"> 
</НЕАО> 
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Если хотите увеличить или уменьшить размер какого-то фрагмента текста, то его надо 
поместить внутрь элемента ЕОМТ и задать значение атрибуту ѕіге. Можно явно указать 
нужное значение, например ѕіге= "4", или задать размер шрифта относительно размера 
по умолчанию (3). В данном случае мы хотим увеличить его на 1, т.е. 312е="+1". Размер 
шрифта увеличится. Можно пользоваться различными комбинациями: + 4, + 3, +2, + 1, 
- 1, - 2 (в нашем случае), лишь бы результат не выходил за рамки 1-7. 

Цвет задается так же, как ивет для фона или основного текста страницы: или по име- 
ни, или шестнадцатеричным кодом. Основной цвет текста мы с вами задали атрибутом 
сехЕ="Б1аск" элемента ВОБУ. Но также это можно сделать и в элементе ВАЗЕЕОМТ ат- 
рибутом со1ок="Б1аск". 

Гарнитуру для всего документа в целом можно также задать в элементе ВАЅЕҒОМТ ат- 
рибутом Еасе="Ахг1а1 “. Если какой-то фрагмент текста должен отличаться гарнитурой 
от остальных, тогда гарнитура для этого фрагмента меняется одноименным атрибутом 
{асе элемента РОМТ. Чтобы не запутаться, приведем пример. 

Пусть в заголовке документа есть такая запись: <ВАЗЕЕОМТ ѕі2е ="3" Ғасе="Агіа1" 
со1ог="#000000">, а в теле документа один фрагмент мы хотим выделить. Нужно увели- 
чить размер на единицу, изменить гарнитуру на Тітеѕ и цвет на красный. Тогда мы должны 
написать следующее: 


<РОМТ в12е="+1" со1ог="гед" Ғасе="Тіпеѕ Мен Копап">Этот фрагмент будет 
напечатан на экране заданными параметрами</РОМТ> 


использования, так как он не отвечает непосредственно за разметку, а задает лишь | 
визуальное оформление. Рекомендуется вместо элемента ЕОМТ использовать табли- | 


Показательный пример работы разных браузеров с ВАЗЕРОМТ 


На этом этапе начинаются уже более существенные различия в работе браузеров. 
Элемент ВАЗЕРОМТ неправильно воспринимается браузерами МоғШа и Орега, кроме 
этого, все браузеры неправильно вычисляют относительный размер шрифта, если он от- 
личен от 3. 

Рассмотрим такой пример. 
<«нтмь> 

<НЕАр> 

<ТІТЫЕ> Пример</ТТТЬЕ> 

<ВАЗЕЕОМТ віте="5" Ғасе="Агіа1"> 

</НЕАр> 

<ворү> 

Простой текст, размер которого должен соответствовать заданному в элементе 
ВАЅЕҒОМТ, т.е. №5<ВВ> 

З">Размер шрифта 3 </ЕОМТ><ВК> 

5">Размер шрифта №5</РОМТ><ВВ> 

Размер шрифта задан относительно, <РОМТ 512е="+2">размер +2</ЕОМТ><ВЕ> 
Размер шрифта задан относительно, <РОМТ ѕіге="-2">размер -2</ЕОМТ> 
</вору» 

</нтмь> 


Картины в браузерах будут совершенно разные, и ни одной вы не получите правиль- 
ной, т.е. соответствующей спецификации языка НТМ!. Давайте в качестве показатель- 
ного примера рассмотрим все три случая. 

В браузере /пгетег Ехріоғег 6.0 увидим картинку, показанную на рис. 2.4. 
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Простой текст, размер которого должен соотвествовать 


заданному в элементе ВАЗЕРОМТ, т. е. №5 
Размер шрифта №3 
Размер шрифта №5 


Размер шрифта задан относительно, размер +2 
Размер шрифта задан относительно, вл 2 


Рис. 2.4. Работа элемента ВАЅЕҒОМТ в браузере Ітетег 
Ехріоғег 6.0 


Как видите, явное задание размера шрифта 5 и гарнитуры Агіаі с успехом сработало. Но 
при задании относительных значений +2 и -2 они уже вычисляются не относительно 5, 
а относительно значения по умолчанию, т.е. 3 — это мы видим в двух последних строках. 

То, что покажет браузер Орега 7.5, приведено на рис. 2.5. 


есмь ИТ -ТЕ 
7 Бе Ба Мен бо осте оо Удон Ыы | 
у е - 3, 4 [4 нестае яч Я азе з - 


7 њон воза Флойод Фінна ран 

Простой текст. размер которого должен соотвествовать заданному в элементе ВАЗЕРОМТ, т е №5 
Размер шрифта)63 

Размер шрифта №5 

Размер шрифта задая относительно. размер +2 

Размер шрифта задан относительно, раар а 


А Гое Е 9-1 Ф 


Рис. 2.5. Работа элемента ВАЗЕРОМТ в браузере Орета 7.5 


Первое, что бросается в глаза, это гарнитура Тітеѕ Мем Котап вместо Апа]. Базовый 
размер также не был установлен равным 5, а остался равным 3, как по умолчанию. Кроме 
этого, наблюдается какая-то странность с символом “№”, он явно взят из другой гарни- 
туры. При задании относительных размеров шрифта странности продолжаются: значе- 
ние +2 и -2 отсчитано относительно 5. Вопрос: почему тогда нельзя правильно задать ба- 
зовый размер для остального текста? 

В браузере Мозга 1.6 мы увидим картину, показанную на рис. 2.6. 
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Простой текст, размер которого должен соотвествовать заданному в элементе ВАЗЕЕОНТ, т. е №5 
Размер шрифта №3 


Размер шрифта №5 


Размер шрифта задан относительно, размер +2 
Размер шрифта задан относительно, рымар 2 


и 


нанге 
Рис. 2.6. Работа элемента ВАЗЕЕОМТ в браузере МозШа 1.6 


Гарнитура Айа! и размер, равный 5, также не восприняты, относительные размеры за- 
даются относительно значения по умолчанию, т.е. 3. Таким образом, элемент ВАЗЕЕОМТ 
полностью проигнорирован. 

Какой от сюда следует сделать вывод — не пользуйтесь элементом ВАЅЕҒОМТ, боль- 
шой потери от этого не будет, с помощью С$$ мы научимся управлять и размером, и гар- 
нитурой шрифтов. Оба элемента — ЕОМТ и ВАЗЕЕОМТ — помечены в спецификации 
НТМЕ как нежелательные для использования. 


Предварительно отформатированный текст 


Если предварительно отформатированный текст скопировать, например, из тексто- 
вого редактора и вставить в НТМГ-код внутрь элемента ВОБУ, а затем посмотреть, что 
получится, то увидим невзрачную картину: весь текст утратит форматирование, не будет 
ни заголовков, ни ‘абзацев, ничего. Будет происходить лишь автоматическое разбиение 
его на строки в зависимости от ширины экрана. Именно для того мы и пишем разметку, 
чтобы браузер понимал, где у нас заголовок, где рисунок, а где абзац простого текста. Но 
в НТМЕ есть такой элемент, который позволяет отобразить текст, предварительно от- 
форматированный с помощью символов пробела, табуляции или перевода строк. Это 
элемент РВЕ (РКЕєогтасбеа бехб). 

Допустим, у нас есть уже отформатированный текст о странах и их столицах такого 
вида: 


Россия Москва 
Германия Берлин 
Англия Лондон 
Франция Париж 


Между названиями стран и их столиц стоит символ табуляции, который позволяет 
осуществить горизонтальное выравнивание названий столиц по одной линии. Если про- 
сто поместить этот фрагмент текста внутрь элемента Р, то получим такую строку: 
"Россия Москва Германия Берлин Англия Лондон Франция Париж", т.е. фор- 
матирование не сохранилось. Если же поместить тот же фрагмент внутрь элемента РКЕ, 
то результат будет совсем другим — форматирование с помощью табуляций сохранится. 
<РВЕ> 
Россия Москва 
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Термания Берлин 


Англия Лондон 
Франция Париж 
</РВЕ> 


В браузере такой код отобразится моноширинным шрифтом. 


Замечание. Браузеры Мо2а и Орега имеют размер табуляции меньший, чем Іпќег- 
пей Ехріогег, для сохранения совместимости лучше пользоваться вместо символов 
табуляции символами пробела. 


Логические выделения в тексте 


При написании любого текста возникает необходимость расставлять в нем акценты, 
выделять заголовки, цитаты, ссылки на другие источники и т.п. Если в устной речи мы 
можем это делать при помощи интонации или жестов, то для печатных изданий есть 
только одна альтернатива — менять внешний вид тех фраз, на которые хотим обратить 
внимание читателя. 

Язык НТМЕ поддерживает несколько типов выделений, и, соответственно, для каж- 
дого из них существует отдельный элемент: 


• н1-н6 — залет заголовки разных уровней от 1 до 6; 

• Ем — слабое логическое выделение, выразительность; 

е УТВОМС — сильное логическое выделение, ударение; 

® СОРЕ — фрагмент кода программы; 

е САМР — пример; 

е \АБ — имя переменной; 

е СІТЕ — цитата; 

• АррвЕЅ5 — адрес. 

С тем, как в тексте выделить заголовки, вы уже знакомы. Делается это при помощи 
элементов Н1-Нб. Поговорим подробнее об остальных элементах. 

Элемент ЕМ используется для простого логического выделения в тексте с целью придания 
фразе дополнительной выразительности. Как правило, в браузерах текст, помещенный внутрь 
элемента ЕМ, выделяется курсивом, поэтому часто вместо него используют элемент І (так пи- 


сать короче), но по смыслу это неправильно. Лучше все-таки не путать эти элементы. 
Пример кода: 


Наша цель - <ЕМ>грамотная</ЕМ> разметка. 


Результат: 


Наша цель - грамотная разметка 


Для более сильного логического выделения, ударения, используется элемент 
ЗТВОМС — по умолчанию в браузере он выделяется полужирным шрифтом. Часто оши- 
бочно вместо него используют элемент В. 

Пример кода: 


НТМ-код <ЅТКОМО>необходимо</ТКОМО> тестировать в нескольких браузерах. 


Результат: 


`'НТМ код необходимо тестировать в нескольких браузерах 
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Ошибка замены элементов заключается в том, что элементы І и В отвечают только за 
начертание шрифта, тогда как ЕМ и 5ТВОМС придают тексту, помещенному в них, опреде- 
ленную смысловую нагрузку. Например, на текст, помещенный внутрь таких элементов, 
‘реагируют поисковые роботы, считая их более приоритетными в содержании страницы. 

Элемент СОРЕ служит для обозначения кода программы и по умолчанию выводится мо- 
ноширинным шрифтом (например, Соипег №еу). Если использовать его совместно с эле- 
ментом РЕБЕ, то можно сохранить исходное форматирование кола. 

Пример кода: 
<СОрЕ> 
Ғолссіоп сото (песка) (<ВВ> 

доситепе .1осасіоп.гер1асе(тебка); <ВЕ> 
гебигп #а1ве; <ВВ> 


}<ВВ> 
</С0рЕ> 


Результат; 


#чпсслор доТо(кеска) { 

Чосмтеле . Іосаслоп. керіасе (неска) ; 
кесшп Фа1е; 

Й 


Элемент ЅАМР служит для выделения в тексте терминов, понятий, примеров. взятых 
откуда-то. Текст, заключенный внутрь элемента, также отображается моноширинным 
шрифтом, поэтому он в какой-то степени похож на элемент сореЕ. 

Пример кода: 

Понятие <ЗАМР>ОВЬ</5АМР> является одним из самых главных для Интернет. 
1 


Результат: 


Понятие из является одним из самых главных для Интернет 


Для выделения в тексте имен переменных из компьютерных программ используется 
элемент УАВ, текст внутри него выделяется курсивом. 

Пример кода: 
Параметр <ҰАВ>а1ідп</УАК> задает выравнивание объекта. 


Результат: 


Параметр 1” задает выравнивание объекта 


Элемент СТТЕ используется для цитирования, им обозначают ссылку на какой-либо 
ресурс: книгу или МеБ-сайт. Часто используется в списках литературы, при указании ав- 
торских прав или упоминании имени владельца ресурса. Текст в элементе выделяется 
курсивом. 

Пример кода: 


<СТТЕ>НТМЬ и С3$ — главный инструмент МеБ-мастера</СТТЕ>, Издательство 
"Книгопись", 2004 г. 


Результат: 


НТМ. и СЗЗ - главный инструмент ИгЬ-азстера, Издательство 
"Книгопись", 2004 г. 


Для указания контактной информации, алреса и телефонов используется элемент 
АООВЕЗ$. Он аналогичен элементу СІТЕ в том смысле, что тоже отображается в браузере 
курсивом. 
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Пример кода: 
Центр обучения и сертификации АБСОЛЮТ: <ВВ> 
<АБОВЕЗВ>г. Саратов, ул. Московская, 35, офис 333<ВВ> 
тел./факс (8452) 23-2-70, 74-00-45 
</АБОВЕВ$ 


Результат: 
Центр обучения и сертификации АБСОЛЮТ 


г. Саратов, ул. Московская, 35, офис 333 
тел/факс (8452) 23-2-70, 74-00-45 


Сокращения 


Для выделения в тексте аббревиатур и других сокращений в НТМІ. существует два 
элемента; АВВЕ и АСКОМҮМ. 

Аббревиатура — принятое на письме сокращение слов или слово, составленное из не- 
скольких частей других слов. Примеры: вуз. исполком и др. Для задания аббревиатур ис- 
пользуется элемент АВВБ, атрибут Е1Е1е для него задает полное написание слова или 
словосочетания. 


Пример 2.2 


Стремительное развитие <АВВЕ Е1Е1е="Мог1А из4е меь">И\и</АВВЕ> началось в се- 
редине 90-х гг. ХХ в. 

В браузере при наведении указателя мыши на аббревиатуру появится подсказка, со- 
держащая ее расшифровку. Чтобы отличать аббревиатуры от обычного текста, они под- 
черкиваются пунктирной линией. 

Элемент АСЕОМҮМ делает то же самое, только применяется для акронимов — слов, 
состоящих из первых букв других слов. 

По неизвестной причине браузер Іпіегпеї Ехрюгег не поддерживает элемент АВВЕ, 
а элемент АСВОМУМ никак в тексте не выделяет такие слова, зато отображает подсказку. 
Остальные же браузеры прекрасно поддерживают оба элемента. В браузере Орега, на- 
пример, аббревиатура или акроним и подсказка с их описанием будут выглядеть так, как 
показано на рис. 2.7. 


Стремительно развитие УГУГЯ началось в середине 90-х годов ХХ века 


[тва Уи 8] 
Рис. 2.7. Отображение подсказки для аббревиатуры в браузере Орега 


Браузер МохШа отобразит элементы так же, только в подсказке не будет слова “е”, 
что, на мой взгляд, более правильно. 


Расстановка кавычек 


Не секрет, что в русском и английском языках кавычки разные. В английском это “и”, 
ав русском так называемые “елочки” — «и». В английском языке применяются и одинар- 
ные кавычки, в том случае когда нужно использовать одни кавычки внутри других. 

Чтобы в НТМІ. какой-то фрагмент внутри строки взять в кавычки, используется спе- 
циальный элемент © (Оцо{е$). Чтобы задать тип кавычек при помощи атрибута 1апо, 
указывается язык, на котором написан текст, и тогда браузер сам должен поставить нуж- 
ные кавычки. Для английского это значение 1апа=" еп", для русского — 1апа="ги". 
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Пример 2.3 


Мы отправились в ресторан <0 1апо="ги">Морской конек</0>, но там не было сво- 
бодных столиков. 

Но опять же, Іпіегпе! Ехріогег не поддерживает этот атрибут совсем, а Мо2Ша и Орега, 
независимо от заданного в атрибуте языка, ставят одинаковые кавычки — двойные, для 
английского языка ("). 

Обойти эту ситуацию можно при помощи вставки специальных символов, обозна- 
чающих кавычки. Спецсимвол &1асџо; (1еЕЕ соџбе) обозначает левую открываю- 
щуюся кавычку “<”, соответствующую ей правую можно добавить в текст, написав 
&гасио; (гіс̧һе аоцее). Тогда тот же пример можно записать так: 

Мы отправились в ресторан &1асио; Морской конек&гасио;, но там не было 
свободных столиков. 


Результат: 


Мы отправились в ресторан «Морской конек», но там не было свободных 
столиков. 


Подробнее о специальных символах читайте в разделе “Специальные символы”. 

Для выделения в НТМІ.-документе цитаты в виде блока текста используется элемент 
ВГОСКОООТЕ. Текст, помещенный внутрь такого блока, отделяется абзацными отступа- 
ми, аналогично элементу Р, кроме этого, еще появляется отступ слева. Атрибут сібе за- 
дает ОВ! того ресурса, откуда взята эта цитата. Привелем пример: 


<ВЬОСКОПОТЕ с1ее="ВЕЕр: //мим. 12. го/всасіс/479/ошб_ 20656.5ћет1"> 

<Р>Бывает, что дизайн сайта достаточно неплохой, но текст оформлен совершенно 
небрежно. Зачастую оформления текста и таблиц просто нет, хотя в дизайне 
сайта он иногда играет не менее важную роль, чем графика. 

</р> 

</ВЬОСКОПОТЕ> 


При этом атрибут с1 Ее поддерживается только браузером Мо2Ша. Чтобы увидеть, от- 
куда взята цитата, нужно в контекстном меню объекта выбрать пункт свойства. Тогда 
раскроется окно (рис. 2.8), в котором будет указан ЦВ! источника цитаты. 


[ае ртка аит 


паке Ргорепоез. 
лоро: Берут года чт9рокя20856 фот 


Рис. 2.8. Окно Еетег Ргорепіеѕ браузера 
Мога 1.6 


Верхние и нижние индексы 


Иногда в тексте встречаются математические или химические формулы, обычное яв- 
ление для которых — верхние и нижние индексы. Вот примеры: Н,О — формула воды 
или х? + у — математическое выражение. В НТМЕ. для записи таких индексов есть эле- 
менты 50В (нижний индекс) и 50Р (верхний индекс). Если мы с их помощью попробуем 
записать эти формулы, то получим такой код: 
н<508>2</80В8>0 — химическая формула; 
х<50Р>2</50Р>+у<50Р>2</50Р> — математическое выражение. 

Результат: 


НО - химическая формула; 2012 _ математическое выражение 
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Разделители 


Иногда требуется принудительно разбить текст на строки или же просто добавить до- 
полнительную пустую строку. Пустой элемент ВЕ (Вгеак — разрыв) выполняет принуди- 
тельный перевод строки (аналог нажатия клавиши <Етег> в текстовом редакторе). 

Напомню, что пустой элемент не имеет содержимого и закрывающего тега и состоит 
только из открывающего, т.е. <ВВ>. 


Код с использованием ВК: Результат обработки кода: 


<Р> 

Белеет парус одинокий<ВВ> 

В тумане моря голубом, <ВА> 

Что ищет он в краю далеком?<ВЕ> 
Что кинул он в краю родном?<ВВ> 
</Р> 


Белеет парус одинокий 
В тумане моря голубом, 

Что ищет он в краю далеком? 
Что кинул он в краю родном? 


У этого элемента есть один параметр с1еах, который определяет, где в браузере 
должно возобновиться написание текста, если рядом расположены некоторые объекты: 
рисунки, таблицы и пр. Допустимые значения параметра с1еах приведены ниже. 


• попе — следующая строка начинается обычным образом. Это значение использу- 
ется по умолчанию. 
Приведем фрагмент НТМ!-кода: 
<ІМС эгс="1тадез\р1сеите.91Е" а119п="1еёе"> 


Текст обтекает рисунок справа, и тут надо вставить принудительный перевод стро- 
ки <ВВ>. 


После элемента ВВ текст продолжается справа от рисунка, как показано на рис. 2.9. 


"Текст обтекает рисунок слева, и 
тут надо вставить 

"усазвопыа | принудительный перевод строки 

[После элемента ВЕ текст 

продолжается слева от рисунка 


Рис. 2.9. Обычный перевод строки, атри- 
бут с1еаг не задан 


» 1еЕе — следующая строка начнется на ближайшей строке под объектом, как 
только левый край будет пуст. 


Приведем фрагмент НТМ!--кода: 
<ІМС згс="1тадез\р1сеиге.91Е" а119п="1еЕЕ"> 


Текст обтекает его слева, и тут надо вставить принудительный перевод строки: <ВВ 
с1еаг="1ІеЁб">. 


После элемента ВВ с атрибутом с1еаг= "1еёс " текст продолжается под рисунком, 
где чистое левое поле, как показано на рис. 2.10. 
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|Текст обтекает его слева, н тут 
Е 
п переве строка 


После злемавта ВК с атрнутом сеаг=МеВ" текст 
продолжается под рисунком, где чистое левое 
поле 


Рис. 2.10. Перевод строки с заданным 
атрибутом с1еак="1еЕЕ" 


е гісһе — следующая строка начнется на ближайшей строке под объектом, как 
только правый край будет пуст; 


е а11 — следующая строка начнется на ближайшей свободной строке под объектом 
улюбого края. 

Предупреждение. Атрибут с1еаг помечен как нежелательный для использования, | | 

поскольку ОТВЕЧИЕТЛИЩЬ за. Визуальное представление, ане разметку: | 


Пустой элемент НВ (һогігота!), с которым мы уже встречались, добавляет визуальный 
элемент, который отображается браузером в виде горизонтальной полоски. Этот элемент 
имеет атрибуты, приведенные в табл. 2. 


Таблица 2.4. Атрибуты элемента НЯ 


Атрибут Описание Значение Пример 

А1ідп Задает выравнивание линии (поумол-  1е#Е|сепеех|к1аВЕ а1ісп="1еғы" 
чанию по центру) 

Со1ог Задает цвет линии цвет со1ок="дкееп" 

512е Задает толщину линии в пикселях от 1 до бесконечности зѕіге ="1" 

Моѕћаде Логический (булев) атрибут, если онус- нет Моѕһаде 


тановлен, то линия не будет объемной 


міасһ Задает длину линии в пикселях или про- число или проценты міасп=«в0%" 
центах от ширины экрана 


Г Предупреждение. Все атрибуты элемента НЕ теперь помечены как нежелательные для | я | 
использования. ‚Вместо них внешний вид элемента надо задавать с помощью С$5._ | 


Например, чтобы получить объемную линию синего цвета шириной 400 пикселей 
и толщиной 2 пикселя, надо написать; 
<НВ а119п="сепкег" 512е="2" мідеһ="400* позвайе со1ог="Ыше"> 


Размер пустого пространства между разделительной линией и текстом будет зависеть. 
от браузера, так же как и абзацные отступы. 

‘Существует еще один интересный элемент, который разделителем назвать нельзя, — 
это антипод элемента ВЕ, который называется МОВЕ (№ Вгеак). Поддерживается браузе- 
рами иегпег Ехріогег и №еїѕсаре. Полезен он будет тогда, когда требуется, чтобы какой- 
либо фрагмент текста всегда находился на одной строке в окне браузера и не разбивался 
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при автоматической разбивке текста на строки в зависимости от ширины окна браузера. 
Текст, помещенный внутрь такого элемента, не может разбиваться, он целиком будет пе- 
реноситься на новую строку, если не умещается не предылущей. Но будьте осторожны 
с элементом МОВЕ! Если поместить внутрь этого элемента слишком длинную строку, то 
при уменьшении окна браузера появится горизонтальная полоса прокрутки достаточной 
длины, чтобы весь этот текст разместился на одной экранной строке. 

В качестве примера использования этого элемента можно потребовать, чтобы фами- 
лии и инициалы людей не разрывались на разные строки: 
<МОВВ>Иванов С.В.</МОВВ>. 


Другой вариант решения этой проблемы — вставка “неразрывного” пробела (его код 
&пЪзр;) между фамилией и инициалами. Этот символ также запрещает разрыв строки 
в том месте, где он стоит. Вот пример: 

Иванов&пЬзр;С. &пЬер;В. 


Подробнее о “неразрывном” пробеле и других спецсимволах написано ниже, в разде- 
ле “Специальные символы” в этой же главе. 


Ссылки, или почему это назвали паутиной 


Наверное, любой человек, который когда-либо просматривал Большую советскую 
энциклопедию или любую другую энциклопедию, встречал там такие строки: “См. ста- 
тью ...” и при этом мечтал о том, чтобы, как по волшебству, он оказался на нужной стра- 
нице. Но все же ему приходилось просто листать большие страницы энциклопедии 
к нужной букве алфавита и искать необходимую статью. С появлением системы гипер- 
текстовых элементов мечты многих лентяев стали реальностью. Автор-составитель лю- 
бого документа теперь может сослаться на любой другой и организовать переход на него 
со своего документа. Для установления связи нужно лишь знать ОКІ. нужного докумен- 
та. Построенная таким образом система гипертекстовых документов своей разветвлен- 
ной структурой действительно в какой-то степени напоминает паутину, в узлах которой 
находятся документы, а ниточки — это связи между ними. 

Между документами можно установить практически неограниченное число гилерсвя- 
зей (гиперссылок или просто ссылок). Различают связи, установленные между разными 
документами, и связи между отдельными частями одного и того же документа. Приведем 
несколько определений. 

Привязка — метка в НТМІ.-документе, куда может попасть посетитель, щелкнув на 
гиперссылке в этом же или в другом документе. 

Гиперссылка — объект, который устанавливает одностороннюю связь одного объекта 
с другим. 

Что же такое ссылка для пользователя? Это некий элемент на МеБ-странице (текст 
или рисунок), щелкнув на котором левой кнопкой мыши, попадешь в другое место Все- 
мирной паутины. Это может быть документ как на том же МеБ-сервере, так и на сервере, 
находящемся на другом конце планеты. Вся прелесть в том, что в идеале переход в обоих 
случаях происходит практически мгновенно. 

Как пользователь отличает те элементы МеБ-страницы, которые являются ссылками, от 
тех, которые таковыми не являются? Часто это легко сделать визуально (текст выделяется 
другим цветом и/или подчеркиванием), но что делать, если визуальной разницы нет? 
Опытные люди не растеряются и скажут: “Посмотри на курсор мыши, он подскажет”. Как 
только курсор принимает вид руки ® (так и просит — щелкни мышкой!) это значит, что 
под указателем находится ссылка. 
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ЭлементА 


Элемент А служит для обозначения в НТМ!-коде ссылочного элемента. Тот элемент 
Меб-страницы, который попадает внутрь элемента А, будет являться ссылкой. Если это 
фрагмент текста, то он будет выделен подчеркиванием и тем цветом, который задан в ат- 
рибуте 11 К элемента ВОрү. 

Вспомним наш пример, где мы хотели сделать ссылку с фрагмента текста “сеть мага- 
зинов и торговых залов” на их список. Поместим этот фрагмент внутрь элемента А и по- 
лучим: 
<Р>Фирма имеет <А>сеть магазинов и торговых залов</А>, расположенных 
в разных районах города. В них Вы можете найти все для вашего дома, 
начиная с отделочных материалов и заканчивая мебелью и аксессуарами. </Р> 

Но куда ведет наша ссылка, пока непонятно. Для того чтобы указать документ, на ко- 
торый должен осуществляться переход по ссылке, нужно добавить атрибут нгеЕ и в ка- 
честве его значения указать ОВ. нужного документа, например Нге: раде. Һет". 
Тогда после щелчка на ссылке откроется указанный документ — раде. НЕт1. 


Пример НЕДОПУСТИМОГО кола: 


<А ВгеЁ="раде.Неш]">сеть <А ВгеЁ="ввор.НЕ"> фирменных магази- 
нов</А> и торговых залов</А> 

Если требуется создать такую конструкцию, то можно выйти из положения, раз- 
местив ссылки на дополнительные материалы по теме внизу страницы, среди ко- 
торых поместить и ссылки на список фирменных магазинов. 


Относительная и абсолютная адресация 


Здесь надо чуть подробнее остановиться на абсолютном и относительном способах 
задания ОКІ.. Представьте, что к вам собирается приехать издалека дальний родствен- 
ник. У вас нет возможности встретить его на вокзале, и вам нужно объяснить ему, как 
найти вашу квартиру. Если родственник впервые в вашем городе, т.е. города не знает со- 
всем, денег на такси у него нет, тогда начинать придется с самого начала, а именно: как 
ему найти выход в город с вокзала, на какой маршрут общественного транспорта сесть, 
на какой остановке выйти, куда двигаться от остановки и т.д. Процедура довольно дли- 
тельная, и имеется большая вероятность того, что родственник так и не лоедет, так как 
просто заблудится. Этот способ больше походит на задание абсолютной адресации. 

Другая ситуация: родственник у вас в гостях уже бывал, но с момента его последнего 
визита вы успели переехать в другой район города. Тогда задача несколько упрощается. 
Вы выбираете какую-то контрольную точку, максимально приближенную к вашему до- 
му, до которой родственник знает, как добраться самостоятельно, и рассказываете, как 
доехать из этого места. Это и есть относительная адресация. 

В случае сМе-страницами, если вы выбираете абсолютную адресацию, то должны указать 
ОК. страницы в полном формате, начиная с названия протокола (см. раздел “Понятие 
ОВ”). Например, для строительной фирмы “Дом” зарегистрирован домен дӢот-=сгој .ги, 
тогда вероятнее всего сайт этой фирмы должен будет расположиться вот по такому адресу: 
ВЕЕР: / /ммм. Чощ-5Его) . ги. Тогда ОВ. нашего первого созданного НТМЕ-документа 
Сосог1а1 .Вета будет таким: ВЕЕр: / Ими. от-эеко) .ка/баеок1а1 . Нем, если мы по- 
местим его в корневой каталог \\еБ-сервера. 
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Пусть наш новый НТМЕ-документ со списком магазинов будет называться 
зкогез .Һст1. Позже мы его создадим и разместим в том же каталоге. Так вот, при абсо- 
лютном способе адресации для ссылки на него мы должны будем указать такой адрес: 
ЪЕЕр: / /мим.аот-зЕко) .ги/ѕсогеѕ .Һот1. 

При относительной адресации нужно указать путь к файлу от того каталога, в котором. 
хранится исходный файл. Например, рассмотрим структуру папок, показанную на рис. 2.11. 


Рис. 2.11. Структура папок для слу- 
чая относительной адресации 


Пусть НТМІ -документы сибогіа1 .ВЕт1 и ѕсоге.Һот] хранятся в папке дот-=сгој 
(это аналог контрольного места, от которого вы объясняли дорогу своему родственнику). 
Тогда, чтобы из файла сисогіа1 .НЕш1 сделать ссылку на зкоге .В 1, используя относи- 
тельную адресацию, достаточно значение атрибута указать в виде: Вгеё="вЕоге. Ве". 
Как видите, когда файлы располагаются в одной папке, все достаточно просто. Достаточно 
лишь правильно указать название файла. 

Предположим, что из того же файла сосогіа1.һҺет1 мы хотим сделать ссылку на 
графическое изображение ріссиге.сіЁ, которое хранится в папке 1тадез, располо- 
женной внутри папки с НТМІ -документами. Тогда путь к нему будет таким: 1тадез/ 
рісіџге.д1#. Это тоже довольно простой случай. 

Сложнее дело в тех случаях, когда файл находится в папке, которая размещается на уро- 
вень выше в иерархии папок. Например, пусть в папке доут1оаад есть файл табегіа1з. 
Ћет1 — список строительных материалов, из которого мы также хотим организовать ссылку 
на список магазинов, т.е. на файл экоге.ВЕт1. Тогда при задании пути необходимо сначала 
подняться в иерархии папок на уровень выше, т.е. как бы выйти из папки доуп1оаа, где на- 
ходится исходный документ тасегіа15 .Һт1. Делается это указанием в начале пути такого 
набора символов: “. . /”. Тогда путь к файлу от файла тасег1а1$ .Неи1 будет выглядеть так: 
../звоге.Вет1. Из папки доуп1оаа поднимаемся на уровень выше в папку дот-ѕігој 
и там сразу находим файл ѕсоке.Һет1. 

Если, например, то же самое потребуется сделать для ссылки на рисунок рісеџге.9іѓ, 
то получим такой путь: . . /ітасеѕ/рісіџге.сії, т.е. сначала поднимаемся на уровень 
выше, в папку дот-ѕесој, потом заходим в папку ітасеѕ, где и находим нужный файл 
ріссиге.9іЁ. 

Преимушество относительной адресации в том, что вы не зависите от того места, где 
хранится ваш сайт. Если, например, при использовании абсолютной адресации вы пере- 
думаете и зарегистрируете для сайта другой домен, а не дот-ѕёгој . ги, то придется ис- 
правлять все ссылки. При относительной адресации этого делать не придется, при усло- 
вии что сохранится структура папок. 

Недостаток относительной адресации в том, что при сохранении МеБ-страницы на 
жесткий диск компьютера ссылки на другие страницы сайта перестанут работать, так как 
будут указывать на папки именно вашего жесткого диска. Эту проблему можно обойти, 
если воспользоваться элементом ВАЅЕ, который мы упоминали уже в заголовке докумен- 
та. Элемент ВАЗЕ позволяет задать базовый адрес (ОКІ) для всего документа. В нашем 
примере таким базовым адресом является: ВЕЕр: / /млли . аот-5Ехо) .ки/эеоге. ВЕ. 
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Задается базовый ОКІ. в заголовке НТМІ.-документа таким образом: 


<НЕАР> 

<ТЕТЬЕ> Строительная фирма “Дом”: о нас </ТТТЬЕ> 
<ВАЗЕ БкеЕ="ВЕЕр: / /имм .Фот-5Его] .ги/"> 

</НЕАО> 


Теперь можем смело пользоваться относительной адресацией. Все пути будут рабо- 
тать относительно базового ОКІ. 


риваем файлы через браузер, поэтому элемент ВАЗЕ следует удалить из кода стра- | 
ниц, иначе наши ссылки работать не будут. | 


Ссылки в новых окнах 


В НТМЕ можно также управлять тем, куда будет загружаться документ, указанный 
вссылке: он может открываться в том же окне браузера, что и исходный, или можно 
принудительно заставить браузер открыть новое окно и в него загрузить документ, ука- 
занный в ссылке. Есть две точки зрения на этот вопрос. Каждая по-своему оправдана. 

Первая точка зрения — пользователя: он сам вправе решать, где открывать ссылку. 
Щелкнув правой кнопкой мыши на ссылке, пользователь может выбрать в раскрывшем- 
ся контекстном меню команду Открыть ссылку в новом окне или может щелкнуть левой 
кнопкой, на ссылке, удерживая нажатой клавишу <$ЫЙ>. В таком случае она откроется 
вновом окне сама. Если нужно открыть ссылку в том же окне — просто щелкаете на 
ссылке левой кнопкой. 

Вторая точка зрения — разработчика сайта: ссылки на страницы сайта открываем 
втом же окне, а если ссылка ведет на другой сайт, то открываем ее в новом окне, чтобы 
не потерять посетителя. Пользователь при этом получает два окна с разными сайтами, 
если одно из них больше не нужно, то можно его закрыть. 

Каким путем илти — выбирать вам. По умолчанию ссылки загружаются в то же окно. 
Если хотите изменить этот порядок, то в элементе А необходимо задать атрибут ёаг- 
деЕ="_Ь1апК", тогда ссылка загрузится в новое окно. Приведем примеры: 


'досшпепе „Вы “>Ссылка загрузится в то же окно</А> 
'досотеп.Һт1" Багдеё=" Ь1апк”> Ссылка загрузится в новое окно </А> 


Для того чтобы все ссылки сайта загружались в новое окно, можно в элементе ВАЗЕ 
задать атрибут сагсес="_Ы1апк". Это сэкономит время на запись кода, да и размер 
файла в итоге будет меньше, так как эту строку вы запишете всего один раз и не нужно 
будет повторять ее в каждом ссылочном элементе А. Но пользоваться таким способом 
я не рекомендую. Постарайтесь в этом вопросе придерживаться одной из точек зрения, 
приведенных выше. 

Чтобы при наведении на ссылку указателя мыши увидеть подсказку, аналогичную 
подсказке УИп4ом$, необходимо задать атрибут Е? Е1 текст подсказки". 


Использование привязки 


Объяснить, что такое метка и привязка, проще всего на небольшом примере. Допус- 
тим, необходимо составить список магазинов для нашей фирмы “Дом”. Пусть их около 
десятка по всему городу. Мы хотим разделить их по районам, чтобы пользователям было 
проще найти ближайший к их дому. Например, в нашем городе есть три района: Ленин- 
ский, Октябрьский и Советский (с вероятностью 99,9% хотя бы один из них есть и в ва- 
шем гороле ©). 
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Пусть список выглядит так. 


• Ленинский район: 
о Магазин “Стройка”, ул. Астраханская, д. 17 


тел. 65-43-21 

о Торговый комплекс “Твой дом”, ул. Московская, 47 
тел. 98-76-54 

о Магазин “Стройматериалы”, ул. Волгоградская, 1 
тел. 12-34-56 


• Октябрьский район: 
о Универмаг “Меркурий”, отдел “Твой дом”, ул. Пушкина, 21 
тел. 52-85-61 
о Магазин “Суперстрой”, ул. Королева, 12 
тел. 41-56-74 
• Советский район: 
о Магазин “Мебель”, пр. Карла Маркса, 56 
тел. 67-85-23 
о Магазин “Дом”, ул. Октябрьская. 32 
тел. 25-75-41 


В реальности этот список может быть гораздо длиннее. Может быть больше районов го- 
рода, и в каждом из них может быть больше магазинов, но для примера этого вполне доста- 
точно. Идея в том, что в случае длинного списка для пользователей будет удобно, если в на- 
чало НТМЕ-документа вынести перечень районов и оформить его строки ссылками 
(привязками) на части этой же НТМІ. -страницы, соответствующие данным районам. 

Сначала надо создать новый НТМІ -документ ѕСоге .Һет1, поместить в него декла- 
рацию типов документа и все обязательные элементы языка НТМІ.. Проще всего будет 
это сделать копированием кода из уже созданного нами файла сосогіа1 .Вем1. 

В заголовке документа необходимо указать название, например такое: 
<ТТТЬЕ>Строительная фирма "Дом": список магазинов</ТІТІЕ> 


В теле документа (элемент ВОрү) создадим отцентрированный элемент заголовка 
первого уровня и запишем заголовок страницы: 
<Н1 а1ісп="сепбег">Список магазинов строительной фирмы “Дом"</Н1>. 


Теперь надо указать названия городских районов и разметить их как ссылки на фраг- 
менты этого же документа. Для того чтобы “отметить” начало этих фрагментов, необхо- 
димо создать специальные метки. В этом случае в качестве ОКІ. для ссылки нужно будет 
задавать название метки, которое всегда начинается с символа решетки “#”. 

Метки создаются с помощью того же элемента А, что и ссылки, имя метки задается 
ватрибуте паме="имя метки латинскими буквами". Имена меток лучше выбирать 
таким образом, чтобы по имени понять, к какому фрагменту текста она относится. На- 
звания районов будут заголовками второго уровня, а метки назовем по первым трем бук- 
вам названий районов. Получим код: 
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<А папе=“1еп"><Н2>Ленинский район</Н2></А> 
-. список магазинов ... 

<А паше=“окЕ"><Н2>Октябрьский район</Н2></А> 
-. список магазинов — 

<А папе="5оУ"><Н2>Советский район</Н2></А> 
ы список магазинов 


В самом начале документа мы должны разместить НТМ!-код, который создаст спи- 
сок районов, со ссылками на соответствующие метки. 
<А БгеЕ="#1еп">Ленинский район</А><ВВ> 


<А ВгеЕ="#о0КЕ">Октябрьский район</А><ВВ> 
<А һгеѓ="#зоу">Советский район</А><ВЕ> 


Принудительный разрыв строки здесь используется для удобства чтения, чтобы на- 
звания районов отображались в столбик, а не в строку. 

Список магазинов пока оформим простыми абзацами, отдельный абзац для каждого 
магазина. Переделаем их в список, когда научимся создавать списки. В элементе 
ВАЅЕҒОМТ оставим только один атрибут, задающий гарнитуру шрифта, цвет шрифта у 
нас задан в элементе ВОрү (вообще говоря, его можно опустить и там, так как черный 
цвет для текста — это значение по умолчанию). Элемент ВАЗЕ надо удалить полностью, 
так как пока мы работаем на локальном диске компьютера. 

Приведем полный код полученной страницы: 
<10ОСТҮРЕ НТМІ, РОВІІС "-//иЗС//рто НТМЬ 4.0//ЕМ" "ВЕЕр: //ммм м3 .ока/ТВ/ВЕС- 
ћіт140/10оѕе.ака"> 
«НТМЬ> 

<НЕАР> 

<ТТТЬЕ> Строительная фирма "Дом": список магазинов</ТЕТЬЕ> 
</НЕАр> 

<ворү> 

<Н1 а1ідп="сепіег">Список магазинов строительной фирмы "Дом" </Һ1> 
#1еп">Ленинский район</А><ВЕ> 
#окЕ">Октябрьский район</А><ВВ> 
#воу">Советский район</А><ВЕ> 


<ВВ> 
<А пате="1еп"><Н2>Ленинский район</Н2></А> 
<Р>Магазин "Стройка", ул. Астраханская, д. 17 
тел. 65-43-21</Р> 
<Р>Торговый комплекс "Твой дом", ул. Московская, 47 
тел. 98-76-54</Р> 
<Р>Магазин "Стройматериалы", ул. Волгоградская, 1 
тел. 12-34-56</Р> 
<А папе="оКЕ"><Н2>0ктябрьский район</Н2></А> 
<Р>Универмаг "Меркурий", отдел "Твой дом", ул. Пушкина, 21 
тел. 52-85-61</Р> 
<Р>Магазин “Суперстрой", ул. Королева, 12 
тел. 41-56-74</Р> 
<А паме=“воу“><Н2>Советский район</Н2></А> 
<Р>Магазин "Мебель", пр. Карла Маркса, 56 
тел. 67-85-23</Р> 
<Р>Магазин "Дом", ул. Октябрьская, 32 
тел. 25-75-41</Р> 

</вору> 
</нтмЕ> 


Результат: 
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Список магазинов строительной фирмы "Дом" 


Ленинский район 
Октябрьский район 
Советский райо 


Ленинский район 
Магазин "Стройка", ул Астраханская, д 17 тел 65-43-21 


Торговый комплекс "Твой до: 


ул. Московская, 47 тел 98-76-54 
Магазин "Стройматериалы", ул Волгоградская, 1 тел 12-34-56 
Октябрьский район 

Универмаг "Меркурий", отдел "Твой дом". ул Пушкина, 21 тел 52-85-61 
Магазин "Суперстрой", ул Королева, 12 тел 41-56-74 

Советский район 

Магазин "Мебель", пр Карла Маркса, 56 тел 67-85-23 


Магазин "Дом”, ул Октябрьская, 32 тел 25-75-41 


Как видите, получен готовый НТМІ -документ, в начале которого идет перечень рай- 
онов, щелкните на нужном названии, и страница автоматически прокрутится к нужному 
району. Знакомьтесь со списком магазинов и выбирайте ближайший к дому! 

Если необходимо задать ссылку на метку в другом документе, то сначала пишут путь 
к этому документу, а затем имя метки, например досотепе .Һот1 #теска. 

Здесь есть только одно неудобство. Переход по любым ссылкам записывается браузе- 
ром в так называемую историю навигации — файл с историей переходов по страницам. 
В браузере существуют кнопки перехода Назад (Васк) и Вперед (Рогмага). Кнопка 
Назад возвращает вас на исходную страницу (ту, где вы щелкнули на ссылке). Кнопка 
Вперед становится доступной после того, как вы вернулись на исходную страницу, 
щелкнув на кнопке Назад. Она позволяет перейти по той же ссылке, без щелчка на ней в 
тексте страницы. 

Браузер в истории может хранить несколько этапов перехода по ссылкам. Количество. 
запоминаемых браузером переходов зависит от настроек браузера. 

Итак, в историю записываются как переходы на другие страницы, так и переходы на 
метку на той же странице. Это иногда вводит пользователей в заблуждение. Например, 
после перехода из начала документа на метку в этом же документе пользователь щелкает 
на кнопке Назад, ожидая возвращения в предыдущий документ, а остается в том же, 
только возвращается к его началу. 

Систему переходов на метку в документе можно реализовать таким образом, чтобы 
запись о переходе не попадала в историю браузера. Как это делается, рассмотрим после 
изучения всех элементов языка НТМЕ в разделе “Как не попасться на крючок”. 


Таблица атрибутов элемента А 


Подытожим все, что мы узнали о ссылках. Перечень всех атрибутов элемента А при- 
веден в табл. 2.5. 
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Таблица 2.5. Атрибуты элемента А 


Атрибут Описание Значение Пример 
= Служит для установки привязки, ссылка имя метки пате="теска" 
на привязку должна включать в себя имя 
метки 
Ћгеғ Задает УВЕ ресурса, на который надо ЦВЕ Ћгеғ-"аосипепе.Һет1#песка" 


переходить после щелчка на ссылке 


сле Содержит описание гиперссылки, текст сібе= 
текст будет выводиться в качестве 
подсказки, если подвести курсор мы- 


следующая страница" 


шик ссылке 
сагсес Задает целевой фрейм или окно. Воз- Бапк багаес="_Ь1апк" 
можны значения: _ве1ғ 
_о1апк — ссылка загружается в новое т 
окно. - 


Значения, которые используются при 
работе с фреймами (см. раздел 
“Фреймы"): 

_ве1 # — загружается в тот же фрейм, 
из которого ссылаются. 

_рагепе — документ загружается в 
непосредственный родительский 
фрейм, эквивалентно _зе1 +, если те- 
кущий фрейм не имеет родительского 
фрейма. 

_кор — загружается документ в пол- 
ное окно (закрывая все остальные 
фреймы). Это значение эквивалентно 
_ вет, если у текущего фрейма нет 
родительского фрейма. 


Создание списков 


Довольно часто возникает необходимость в создании списков. Списки используются 
в основном для структурирования информации. Прелесть автоматического создания 
списков в том, что при его редактировании происходит автоматическая нумерация (или 
маркирование), которую не надо исправлять вручную. В терминах текстовых редакторов 
сушествует несколько видов списков: ненумерованный (по-другому — маркированный), 
нумерованный и многоуровневый. В языке НТМЕ. есть еще один тип списка, который вы 
вряд ли найдете в текстовых редакторах: список определений. 


Список определений 


Этот список задает последовательность терминов и их описаний. Так создаются глос- 
сарии и им подобные списки. 

Элемент рт, (Рейпшоп 1150) задает список терминов, т.е. весь список определений цели- 
ком должен располагаться между тегами <Р1.> и </рі>. Внутри самого списка выделяют 
еще два элемента от (Пейп!юп Тегт) и Ор (Бейпйюп Оеѓегтіпайоп). Первый задает сам 
термин, определение которому надо дать, второй задает определение этого термина. 
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Пример: 
<01> 
<0Т>Термин 1 </0Т><рр>Описание термина 1</06> 
<От>Термин 2</0Т><рр>Описание термина 2</00> 
</01> 

В браузере этот текст будет отформатирован следующим образом: термин будет вы- 
ровнен по левому краю, а его определение будет располагаться на новой строке со сдви- 
гом вправо. 


Термин 1 
Описание термина 1 


Термин 2 
Описание термина 2 


В зависимости от различных задач, такой тип списка может оказаться довольно по- 
лезным для глоссариев, справочников и т.п. 


Нумерованный список 


Рассматриваемый список представляет собой перечень, “пронумерованный” каким- 
либо образом. Нумерация может идти привычным способом, т.е. при помощи арабских 
цифр 1,2,3 и так далее или же при помощи букв или цифр римского алфавита. 

Нумерованный список задается элементом от (Огдегед 1451), т.е. весь список должен 
располагаться между тегами <Ог> и </01>. Пункты самого списка задаются элементом 
ит (145 Кет). 

Пример: 


<01> 
<> Пункт 1</01> 
<11> Пункт 2</11> 
<ЫІ> Пункт 3</ь1> 
</01> 


Закрывающий тег для элемента ІІ не является обязательным, и его можно опустить в 
НТМЕ-коде, на отображение списка в окне браузера это влияния не окажет. В окне брау- 
зера этот НТМЕ--код отобразится так: 


1. Пункт1 
2 Пункт? 
3 ПуштЗ 


При этом браузер сам создаст необходимую нумерацию. Атрибут буре задает тип ну- 
мерации. Если значение не задано, то по умолчанию используется нумерация арабскими 
цифрами. Доступны следующие варианты нумерации: 


е гуре=“А“ — заглавные латинские буквы, т.е. А, В, С... 
• гуре=“а" — прописные латинские буквы, т.е. а, Б, с... 
• гуре="т" — большие римские цифры, т.е. І, П, ІШ... 


ө Гуре="1" — малые римские цифры, т.е. і, іі, їі 
• Суре= "1" — стандартные арабские цифры (значение по умолчанию) 1,2,3. 


Предлагаю самостоятельно создать небольшой нумерованный список и поэкспери- 
ментировать со значениями атрибута суре. 
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Ненумерованный список 


Этот список создается аналогично нумерованному, но вместо главного элемента ис- 
пользуется элемент 1. (Опог4еге4 1451). 
Пример: 
<л> 
<11> Пункт 1</01> 
<> Пункт 2</01> 
<> Пункт 3</01> 
</л> 


В окне браузера этот НТМІ -код отобразится так: 


= Пут 
* Пунт? 
= Пумкт3 


Типы маркеров можно менять при помощи атрибута суре, который может прини- 
мать следующие значения: 


• Суре="дізс" — маркер в виде закрашенного круга (значение по умолчанию); 
е ГСуре= "сігс1е" — маркер в виде пустого круга; 
• буре="заџаге" — маркер в виде закрашенного квадрата, 


В примере со списками магазинов использовался маркированный список с маркера- 
ми в виде квадратов. В качестве примера давайте запишем код для Ленинского района. 
Для остальных районов попробуйте сделать это самостоятельно. 
< буре="всцаге"> 

<Г1> Магазин "Стройка", ул. Астраханская, д. 17<ВВ> 

тел. 65-43-21</01> 

<ыІ> Торговый комплекс "Твой дом", ул. Московская, 47<ВВ> 

тел. 98-76-54</01> 

<ЫІ> Магазин "Стройматериалы", ул. Волгоградская, 1<ВВ> 

тел. 12-34-56</01> 
</1> 


Видите, все довольно просто. Только для того, чтобы номера телефонов находились 
на отдельных строках, необходимо в местах перевода строки поместить пустой элемент 
<ВВ>. Получаем такой список: 


+ Магазин "Стройка", ул. Астраханская, д 17 
тел. 65-43-21 

= Торговый комплекс "Твой дом", ул. Московская, 47 
тел 98-76-54 

= Магазин "Стройматериалы", ул. Волгоградская, 1 
тел 12-34-56 


Как раз то, что было нужно. Остается по аналогии изменить код списков для Ок- 
тябрьского и Советского районов. После этого страница со списком магазинов будет за- 
кончена. Приведем ее полный код и окончательный вид в браузере (рис. 2.12): 


<100СТҮРЕ НТМ РОВЬТС "-//МЗС//ОТЬ НТМ. 4.0//ЕМ" "НЕЕр: //имм.м3 .ога/ТВ/ВЕС- 
Ћіт140/10ове.асӣ"> 
<НТМІ> 


<ТІТШЕ> Строительная фирма "Дом": список магазинов</ТГТЬЕ> 
</НЕАО> 
<вору> 
<Н1 а1ідп-"сепсег">Список магазинов строительной фирмы "Дом" </һ1> 
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<А ВгеЕ="Н1еп">Ленинский район</А><ВВ> 
*#оКЕ">Октябрьский район</А><ВЕ> 
"#воу">Советский район</А><ВЕ> 


<А паще="1еп"><Н2>Ленинский район</Н2></А> 
<, буре="ваџаге"> 
<01> Магазин "Стройка", ул. Астраханская, д. 17<ВВ> 
тел. 65-43-21</01> 
<ЫІ> Торговый комплекс "Твой дом", ул. Московская, 47<ВВ> 
тел. 98-76-54</01> 
<> Магазин "Стройматериалы", ул. Волгоградская, 1<ВВ> 
тел. 12-34-56</11> 
</л> 
<А папе=“оке"><Н2>Октябрьский район</Н2></А> 
<00 Суре="ѕсџаге"> 
<Г1> Универмаг "Меркурий", отдел "Твой дом", ул. Пушкина, 21<ВВ> 
тел. 52-85-61</01> 
<Г1> Магазин "Суперстрой", ул. Королева, 12<ВВ> 
тел. 41-56-74</01> 


</л> 
<А папе="ѕоу"><Н2>Советский район</Н2></А> 
<00 буре="зачаке"> 


<1Л> Магазин "Мебель", пр. Карла Маркса, 56<ВВ> 
тел. 67-85-23</01> 
<> Магазин "Дом", ул. Октябрьская, 32<ВВ> 
тел. 25-75-41</11> 
</л> 
</Ворү> 
</НТМЬ> 


Список магазинов строительной фирмы "Дом" 


Ленинский район 


Октябрьский район 
Советский район 


Ленинский район 


= Магазин "Стройка", ул. Астраханская, д. 17 
тел 65-43-21 

= Торговый комплек "Твой дом”, ул. Московская, 47 
тел 98-76-54 

= Магазин "Стройматериалы", ул. Волгоградская, 1 
тел 12-34-56 


Октябрьский район 


+ Универмаг "Меркурий", отдел "Твой дом", ул Пушкина, 21 
тел 52-85-61 

= Магазин "Суперстрой". ул Королева, 12 
тел 41-56- 


Советский район 


= Магазин "Мебель", пр. Карла Маркса, 56 
тел 67-85-23 

= Магазин "Дом", ул Октябрьсқая, 32 
тел. 25-75-41 


Рис. 2.12. Окончательный вид списка магазинов компании “Дом” в окне браузера 
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Специальные символы 


Довольно часто бывает нужно на страницу добавить символы, которые невозможно 
ввести с клавиатуры, например ©, ®, "м, $. Проблема подобного рода возникает и тогда, 
когда в текст необходимо ввести символы, используемые при написании самого НТМІ- 
кода, например “<”, “>”, “/”. 

Такие символы в НТМЕ называются специальными. Их можно использовать в НТМТ.- 
коде, не указывая напрямую, а задавая ссылки на них. Это числовые коды или символь- 
ные имена, которые уже легко могут быть включены в документ НТМГ. Такие ссылки 
всегда берутся в прямые двойные кавычки, начинаются со знака "& " и заканчиваются 
точкой с запятой “ ; ”. Вот некоторые примеры. 


е "516; " представляет знак <. 


е "9С; " представляет знак >. 


• "5апоЕ; " представляет знак ". 
е "5#229; " (десятичное число) представляет букву "а" с кружком сверху. 


е "&пЬѕр; 


неразрывный пробел (о нем уже упоминалось выше). 


Таких символов очень много, перечень наиболее популярных и часто используемых 
специальных символов с их кодами и именами найлете в приложении А. 
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Глава 3 
Графика, звук и мультимедиа 


В этой главе... 


> Рисунки на УеБ-странице 
Звук — элемент ВОЗОЦМО 


Встраивание произвольных объектов 


ууу 


Навигационные карты 


Рисунки на Меб-странице 


Язык НТМЕ обладает довольно обширными средствами “оживить” скучный текст. 
Графика, звук и видео — все это можно добавить на М№еб-страницу. Но вот вопрос — 
стоит ли это делать? Давайте обо всем по порядку. Начнем с добавления на страницу изо- 
бражений. 

Как уже упоминалось ранее, НТМЕ. допускает три формата графических файлов: 
ЈРЕС, СИЕ и РМО. Только один из них может хранить внутри себя простейшую анима- 
цию — это формат СІЕ. Остальные поддерживают только статическое изображение. 
Формат РМС не получил достаточно широкого распространения. Форматы ЈРЕС и СИЕ 
лидируют среди изображений в Интернет. 


Элемент іма 


Любое изображение в формате ЈРЕС или СІЕ можно добавить на МеЬ-страницу при 
помощи элемента ІМС (ІМабСе). Это пустой элемент, т.е. он имеет только открывающий 
тег, с помощью атрибутов которого задаются все параметры. 

Атрибут ѕгс задает источник (ОКІ) файла с изображением. Обычно при создании 
УеБ-сайта все изображения хранят в отдельной папке для удобства обращения к ним, а 
также для того, чтобы не путаться в огромном количестве разнородных файлов. Пусть, 
например, папка с изображениями называется ітадеѕ, в ней находится файл Еап- 
і1у.јро — фотография семьи, сделавшей удачную покупку в одном из магазинов 
строительной фирмы “Дом”. Для того чтобы добавить эту фотографию в НТМІ- 
документ со списком магазинов, можно использовать такой код: 
<1МС вгс="ітасдеѕ/ Ғапі1у.јра"> 

Для примера можно взять фотографию своей семьи или любой другой рисунок, кото- 
рый есть в вашем распоряжении. Просто сохраните его с именем Ғаті1у.јро в папку 
іладеѕ. В дальнейшем он нам еще не раз пригодится. 

После добавления рисунка внешний вид страницы будет зависеть от того, в какое 
именно место будет вставлена такая строка с кодом элемента ІМС. По умолчанию рису- 
нок вставляется в текст таким образом, как будто это одно слово, т.е. не задается никаких 
параметров обтекания. 


Обтекание — способ взаимодействия изображения и расположенного рядом с ним 
текста. В НТМЕ обтекание задается одновременно с выравниванием рисунка по пра- 


вому или левому краю. Тогда рисунок “прижимается” к нужной стороне страницы, а 
текст обтекает его с другой стороны. 


Когда выравнивание не задано, рисунок просто вставляется в текст как объект стро- 
ки, как будто бы это большая буква. Высота строки текста при этом увеличивается до вы- 
соты рисунка. Текст при этом не распределяется вокруг изображения. Примеры вырав- 
нивания рисунка приведены в табл. 3.1. 


Таблица 3.1. Варианты выравнивания изображений 
Вид в окне браузера НТМЕ-код 


Текст. и в него просто вставлен <р>Текст, и в него просто вставлен 
рисунок<ІМС экс="русЕиге.}ра">. 
Обтекание не задано.</Р> 


рисуно Ообтеканпе не 
задано 


тек < <Р> Текст, и в него вставлен рисунок 
екст, и в него вставлен с заданным <1Мб эгс="ріссцге.јрд" 
в За а1ідп="гідһће"> обтеканием, выравнивание 


по правому краю. </Р> 
обтеканием, выравнивание 


по правому краю 


В первом случае расположение рисунка будет зависеть от того, где именно располага- 
ется код элемента ІМС. В нашем примере он стоит после слова рисунок, поэтому и само 
изображение находится после этого слова. Переместите его в другое место, изображение 
переместится туда же. 

Во втором случае, когда задано обтекание и выравнивание, расположение элемента 


ТМС в коде не играет роли: изображение все равно будет “прижато” к правой стороне 
страницы, а текст будет обтекать его слева. 


Выравнивание изображений 


Способов выравнивания изображений относительно текста и любых других объектов 
на МеБ-странице существует несколько. Все эти способы можно разделить на два типа: 
выравнивание по вертикали и по горизонтали. 


Выравнивание по горизонтали характеризуется тремя основными значениями: по 
центру (сепсе), по левому (1еЕе) и правому (хісће) краям. С ними мы уже встреча- 
лись, например, при выравнивании абзацев или заголовков. На рис. 3.1 наглядно показа- 
но, как значение атрибута а1 іст влияет на выравнивание объектов на странице. 


Іей семег пам 
= я 


Рис. 3.1. Виды горизонтального выравнивания 
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С вертикальным выравниванием мы еще не встречались, теперь самое время это ис- 
править. Есть также три основных значения — вертикальное выравнивание по центру 
(пзаате), по верху (сор) и по низу (БоЕЕоп) страницы. 


1ор | 


тідаіе 


Бойот | 


Рис. 3.2. Виды вертикального 
выравнивания 


Для выравнивания изображений относительно текста используется уже знакомый 
нам атрибут а119т. Для него возможно задание таких значений: а1+9п="1е#Е | гісће | 
сор | сехссор |тіда1е | арѕтіаа1е | раѕе1 іпе | Бое сом | арѕроєсот". Расшифруем их 
значения. 


+» а]ісп="1еғс" — изображение будет перемещено к левому полю страницы (на 
первую возможную слева позицию), а текст будет обтекать изображение справа. 


• а1ідп="гідһс" — изображение выравнивается по правому краю, а текст обтека- 
етего слева. 


» а119п="Еор" — изображение выравнивается в соответствии с самым высоким 
‘объектом в строке. 


Д а1ідп= "Сехссор" — изображение выравнивается по высоте с самым высоким 
объектом в строке (чаще всего, но не всегда, это то же самое, что и а1ісп=" бор"). 


е а1ісп="тіаа1е" — выравнивает вертикальный центр изображения в соответствии 
с базовой линией (линией, на которой расположен текст текущей строки (рис. 3.3). 


| Текстовая строка_ 


(базовая линия 
высота строки 


Рис. 3.3. Базовая линия и высота строки 
е а1ісдп="аретіда1е" — выравнивает вертикальный центр изображения с верти- 
кальным центром текущей строки. 


• а1ідп="Баѕе1іпе" — выравнивает низ изображения по базовой линии текущей 
строки. 


ә а]ісп="Бобсот" — выравнивает низ изображения по базовой линии текущей 
строки (фактически то же самое, что и а1ісп= "раѕе1іпе") 


е а1іс̧п="арѕЬосбот" — выравнивает низ изображения по низу текущей строки. 
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Кроме способа выравнивания и, как следствие, обтекания текстом, для рисунка мож- 
но задать размер пустых областей (полей) вокруг изображения, которые не будут заняты 
текстом при обтекании. Задаются поля попарно: верхнее и нижнее — атрибутом узрасе, 
левое и правое — атрибутом Һѕрасе. Значения задаются в экранных точках (пикселях). 

К примеру, если требуется задать выравнивание изображения по правому краю и поля 
размером 10 (верхнее и нижнее) и 5 (левое и правое) пикселей, получим такой НТМГ--код: 
«ІМС ѕгс="рісбшге.јрс" аїісп="гісће" уврасе="10* һзрасе="5">. 


Задание рамки 


Также можно задавать толщину рамки вокруг рисунка при помощи атрибута рогдег. 
Эта рамка может вовсе отсутствовать (рогдег= "0" — значение по умолчанию) или ее 
толщина задается в пикселях. Цвет рамки по умолчанию черный. Изменить его средст- 
вами НТМІ. нельзя. Поэтому, если требуется без использования дополнительных средств 
(например, каскадных таблиц стилей) создать вокруг изображения рамку произвольного 
цвета, то лучше ее нарисовать в графическом редакторе внутри самого изображения 
и вставить эту картинку на М№еб-страницу без рамки. 


Изображения-ссылки 


При работе с изображениями и рамками вокруг них есть одна особенность, когда само 
изображение является ссылкой. Так же, как и фрагмент текста, изображение может быть 
ссылкой. Самый распространенный случай, пожалуй, когда на страницу помещается 
уменьшенная копия изображения, а при щелчке на этой уменьшенной копии оно откры- 
вается в полный размер. 

Делается это с простой практической целью — уменьшить время загрузки страницы. 
Совокупный размер кода страницы и всех графических файлов, используемых на ней, 
называют весом страницы. Это термин из профессионального жаргона \\- 
разработчиков, но тем не менее это понятие достаточно полно характеризует тот объем 
информации, который необходимо будет загрузить пользователю на компьютер, чтобы 
увидеть всю страницу целиком. Вес страницы не должен превышать 40-50 Кбайт, ну 
максимум 100 Кбайт, и чем он больше, тем дольше страница будет загружаться. Размер 
НТМІ -кода пренебрежимо мал по сравнению с графическими элементами, которые ис- 
пользуются на странице. Именно поэтому очень важно правильно работать с графикой. 

Допустим, на страницу надо поместить изображение размером 800х600 точек (это на 
сеголняшний день минимальное разрешение экрана срелнестатистического пользователя 
сети). Пусть размер такого файла, сохраненного в формате СЕ или ЈРЕС, будет 100 Кбайт. 
Добавьте пять таких изображений на страницу, и пользователь будет около 2-х минут на- 
слаждаться процессом загрузки страницы. Вы бы стали так долго ждать, когда в сети най- 
дется множество ресурсов по аналогичной тематике? 

Если на страницу поместить маленькие копии этих изображений, предварительно, 
уменьшив их в графическом редакторе, скажем до’размера 100х75 пикселей, можно со- 
кратить размер каждого такого файла до 12 Кбайт. Тогда на страницу мы помещаем 
уменьшенную копию изображения, а из нее делаем ссылку на полный вариант. При этом 
общий размер страницы и время се загрузки с пятью такими изображениями уменьшатся 
примерно в 8 раз. Если кто-то захочет рассмотреть заинтересовавшее его изображение 
подробнее, он просто щелкнет на этом уменьшенном изображении как на ссылке и уви- 
дит полное изображение. Не захочет, не будет этого делать. 

Вернемся к нашему примеру с добавлением фотографии семьи, совершившей удачную 
покупку в одном из магазинов. Оригинальное изображение называется Ғаті Ту. јро, тогда 
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уменьшенную его копию назовем ЕатаТу_з .)ра. Сначала на страницу ѕсогеѕ. Һот] по- 
мещаем мини-копию этого изображения, выравниваем се по правому краю и оформляем 
как ссылку на файл оригинала, так чтобы она открывалась в новом окне. Делается это так: 
<А һхеё="ітадеѕ/ апіЛу.јро" кагаек=“_ЪЛапк"> 

<ІМС вгс="іпабеѕ/ Еапіїу в.јра" а1ісп="гісћс"> 
</А> 

Обратите внимание, что в атрибуте вгеЕ элемента А залан УВ, указывающий не на 
НТМЕ-документ, а непосредственно на графический файл. Это вполне допустимо. При пере- 
ходе по ссылке откроется новое окно браузера (так как задан атрибут кагдее="_Б1апк"), 
в котором появится изображение Ғаті1у . 3ра оригинального размера. 

В коде для элемента ІМС мы не указали значение атрибута Ъот4ек, следовательно, 
должно использоваться значение по умолчанию (Бог4ег=" 0"), и рамки вокруг рисунка 
быть не должно. Но на самом деле рамка у рисунка будет, и ее цвет будет совпадать с иве- 
том активных ссылок до того, как вы по ней щелкнете. После того, как вы посстите 
ссылку, — цвет рамки изменится на тот, который задан для посещенных ссылок. На- 
помню, что эти параметры задаются атрибутами 1іпк и а1іпк элемента вору. Чтобы 
избавиться от рамки вокруг изображения-ссылки, необходимо явно указать значение па- 
раметра Богаех=" 0", тогда рамка исчезнет. 

Описанный нами выше прием помещения на страницы мини-изображений и оформ- 
ления их как ссылок на более крупные версии этих изображений довольно универсален. 
Его можно применять для оформления любых У\еБ-страниц, особенно фотоальбомов или 
галерей. Такие страницы, как правило, содержат много изображений, такой полход по- 
зволит оптимизировать их размер. У пользователя, в свою очерель, останется возмож- 
ность увилеть оригиналы. 


Когда браузер не показывает рисунков 


В любом браузере есть возможность отключить отображение рисунков. При этом код 
У/еБ-страницы скачивается полностью, за исключением самих файлов изображений. Де- 
лается это через меню браузера Сервис, пункт Свойства обозревателя, закладка 
Дополнительно. Так как объем графических файлов значительно превышает объем тек- 
стовых файлов, коим так же является и НТМІ -документ, это позволяет, с одной сторо- 
ны, экономить Интернет-трафик, а с другой — увеличить скорость передачи документа с 
сервера на локальный компьютер. При просмотре таких страниц вместо картинок поль- 
зователь будет видеть пустые прямоугольники, как показано на рис. 3.4. 


Рис. 3.4. Внешний вид графических объектов при отключен- ү 
ном воспроизведении изображений в настройках браузера 


Понять, что изображено на рисунке, не увидев его, невозможно. Для того чтобы обой- 
ти этот запрет, был введен специальный атрибут а1с (аНеглайуе іехі), который задает 
альтернативный текст (описание) изображения. Для нашего примера можем написать: 
а1Е="Фото семьи, совершившей покупку". Для пользователя, у которого отключе- 
ны рисунки, это теперь булет выглядеть так, как показано на рис. 3.5. 


Б] Фе сены 


Рис. 3.5. Внешний вид отключенного рисунка с альтерна- | 21 55е, 
тивным текстом | ‘покупку 
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Если описание заинтересовало пользователя, то возможность просмотреть сам рису- 
нок имеется, достаточно в контекстном меню рисунка (оно раскрывается щелчком пра- 
вой кнопкой мыши) выбрать команду Показать рисунок. После этого выбранный рису- 
нок загрузится с УМеБ-сервера, и вы сможете его увидеть. 

Задавайте альтернативное описание для рисунков, но постарайтесь делать его крат- 
ким и лаконичным, перелающим суть. Например, если это фотография — пишите, чья 
это фотография. Если это логотип фирмы “Дом”, пишите “Логотип фирмы «Дом»”. Ес- 
ли это схема проезда, пишите “схема проезда”, ит.д. 


Задание размера 


Среди прочих параметров, для изображения можно задать его ширину и высоту. За- 
даются эти параметры одноименными англоязычными атрибутами міасһ (ширина) 
иһеісће (высота). Задание значения атрибутов допускается либо в пикселях (рх), либо 
в процентах от ширины экрана. До сих пор мы в примерах не задавали ширину и высоту 
для изображений, браузер использовал значения по умолчанию, которыми являются ре- 
альные размеры изображения. 

Если в качестве значений атрибутов міаећ и һеісће задаются значения, меньшие 
реальных, то браузер уменьшит изображение до указанных значений. Надо иметь в виду, 
что размер файла изображения при этом не изменяется. Меняется как бы масштаб ото- 
бражения рисунка в окне браузера. 

При задании значений, больших чем реальные, браузер растянет изображение до раз- 
меров, заданных атрибутами міасЬ и Һеіс̧һе. Качество изображения при этом может 
значительно ухудшиться (при сильном увеличении): проявится “мозаичность” изобра- 
жения. Точки изображения увеличатся в размерах и превратятся в довольно большие 
квадраты, залитые одним цветом. В результате рисунок станет похожим на мозаику. 

Таким образом, изображения лучше заранее отрелактировать в графическом релакто- 
ре и сохранить их, задав нужные размеры. Лучше не прибегать к изменению размеров 
средствами НТМ!--кода. 

Тем не менее в НТМ!-коде следует указывать размеры изображений, даже если они 
совпадают с реальными. Это поможет браузеру на этапе загрузки У/еБ-страницы опреде- 
лить, сколько места необходимо зарезервировать для рисунка. Если размеры рисунка не 
указаны, то браузер не сможет узнать реальный размер рисунка до тех пор, пока он не бу- 
дет загружен полностью. Поэтому часто можно видеть на плохо сверстанных страницах 
“прыгающий” в процессе загрузки страницы дизайн. Сначала браузер получает НТМ!- 
код страницы, и если в нем не указаны размеры рисунков, то он произвольным образом 
резервирует место под них на странице и уточняет эти размеры по мере загрузки изобра- 
жений. Тогда на ваших глазах страница перестраивается, размеры рисунков корректиру- 
ются, и только после полной загрузки У/еБ-страницы увидите ее в том виде, в каком она 
была задумана автором. Задание ширины и высоты рисунков позволит браузеру заранее 
просчитать расположение всех элементов, и элементы страницы “прыгать” по экрану 
в процессе загрузки уже не будут. 

При отключенных рисунках возникает аналогичная проблема, если не заданы разме- 
ры. В этом случае рисунки вообще не загружаются, и если размеры не указаны, то брау- 
зер их никогда не узнает, поэтому пустые прямоугольники, символизирующие незагру- 
женные изображения, могут быть разбросаны по странице абсолютно беспорядочно 
и хаотично. Красоты вашей странице это не добавит, уж поверьте. 

Еще более осторожно следует относиться к заланию ширины или высоты изображения в 
процентах от ширины экрана, потому что заранее не известно, какое разрешение установ- 
лено на экране монитора пользователя, просматривающего сайт. Оно может меняться в до- 
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вольно широких пределах от 600 х 800 пикселей до 1600 х 1200 или даже больше. При этом 
100% ширины будет соответствовать горизонтальной развертке экрана, а 100% высоты — 
вертикальной развертке. Растянутое в браузере изображение выглядит ужасно, проявляют- 
ся недостатки алгоритмов сжатия, появляются закрашенные одним цветом “квадраты”, ко- 
торые когда-то были одной точкой изображения. Поэтому не рекомендую в НТМ!-коде 
задавать рисункам параметры, превышающие их физические размеры. 

Итак, ширина и высота — очень важные параметры, не ленитесь их задавать. При 
этом в качестве единицы измерения лучше использовать пиксели, а не проценты. 


Изображения — таблица атрибутов элемента іма 


Постараемся обобщить все, что мы узнали о добавлении изображений на МеБ- 
‘страницу. Значения и описания всех возможных атрибутов приведены в табл. 3.2. 


Таблица 3.2. Атрибуты элемента ІМС 


Атрибут Описание Значение Пример 
вес Задает ОАІ графического ЧАЇ. зЕс=“ааез/ 
файла, который должен ау ВОР 
быть встроен в документ 
а1е Задает текст, который бу- текст а1с- "Фото семьи, 
дет выводиться на месте совершившей покупку" 
изображения в том случае, 
если отображение рисун- 
ков отключено 
міасћ, Задают высоту и ширину значение врхили% міаеһ="100" һеісһе="75" 
петавЕ изображения 
Богаег Устанавливает толщину значение в рх Богаег="0* 
рамки вокруг изображения. 
узрасе, Указывают значения верх- значение в рх или % узрасе=*10* 
бБГасЕ него, нижнего, правого и ћзрас, ј 
левого полей изображения 
а1ісп Определяет способ вырав- Кор, а1ідп="гіһе" 
нивания изображения на пааале, 
странице Боёсоп, 
ТеЕЕ, 
гісће 
Пример 3.1 ` 


<1МС згс="іпадеѕ/ Ғапі1у_=.јрц" а1с="Фотография моей семьи" міасћ= "100" 


Һеісс="75" а1ісп="гісһе" узрасе="10" Вврасе=“5" Богаег="0“> 


Звук — элемент ВС$ОУМО 


Кроме графических изображений, на М№еБ-страницу можно интегрировать фоновый 
звук. Он будет проигрываться во время просмотра пользователем страницы — естествен- 
но, при условии, что у пользователя есть колонки или наушники. Для этого нужен ау- 
диофайл, содержимое которого и будет служить музыкальным оформлением. В НТМЕ 
поддерживаются лишь простейшие аудиоформаты: МАУ, АЦ и МП. Для эксперимен- 
тов можете скачать МІРІ-файл или воспользоваться стандартными звуками операцион- 
ной системы. Найти их можно скорее всего в папке С : \ИтТМрОи$\Медза. 
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Звук добавляется при помощи элемента Вс$О0м (ВасКргоцп@ Ѕошиі), который помещает- 
ся втело документа (элемент ВОБУ). Атрибут ѕгс по аналогии с одноименным атрибутом эле- 
мента ІМС задает КІ. того объекта, который нужно встроить в страницу, в нашем случае это. 
звуковой файл. Очевидно, звуковой файл имеет ограниченное время звучания, иесли хотите, 
чтобы музыка звучала долго, можно задать число повторений атрибутом 1оор. Если указать 
значение –1, то файл будет проигрываться бесконечно. Приведем пример: 

<ВС5О0МО згс="зопс.тійаі" 10ор="10"> — задается десятикратное повторение 
воспроизведения звукового файла зопа .тіаі. 

Стереобаланс регулируется атрибутом Ба1апсе. Допустимые значения от -10000 до 
10000. Нуль соответствует несмещенному влево или вправо балансу (Ба1апсе="0"). 

Громкость проигрывания можно регулировать атрибутом \уо1ллте. Допускаются зна- 
чения от -10000 до 0. Нулевое значение соответствует максимальной громкости, какую 
может воспроизвести оборудование пользователя. Будьте осторожны при задании мак- 
симальной громкости! Если у пользователя мощная стереосистема и поздней ночью он 
‘случайно наткнется в сети на сайт с забойной фоновой музыкой, то, возможно, эту ночь 
он без последствий не переживет. Этот сайт, после такого радушного приема, он запом- 
нит надолго и больше никогда заходить на него не булет. 

И вообше, от использования фоновой музыки лучше воздержаться по нескольким 
причинам. 

Причина первая. Пользователь идет на сайт не музыку слушать, а получать информа- 
цию, это он привык делать в тишине и просто не готов услышать музыку на сайте. Чаще 
всего у пользователя уже играет его любимая композиция, а тут неожиданно из глубин 
Интернет “поет” МеБ-странииа. Причем отключить фоновый звук пользователь не смо- 
жет, поэтому он немедленно развернстся и пойдет искать информацию в лругом, более 
спокойном месте. Вы же потеряете пользователя навсегда. 

Причина вторая. Качественный звуковой файл лобавить все равно не сможете по 
очень простой причине — он слишком большого объема. Звуковые файлы формата 
МАУ, АЦ или МІРІ качеством. как правило, не отличаются, зато они небольшие по объ- 
ему, и их легко и быстро можно передать по каналу связи. Так зачем слушать некачест- 
венную музыку, когда под рукой огромный выбор музыки отличного качества? 

Причина третья. Какого бы малого размера ни был звуковой файл, прежде чем его ус- 
лышать, пользователю необхолимо сначала закачать его на компьютер. Эго отнимет не- 
которое время и “съест” определенную часть Интернет-лрафика. Но нам нужно, чтобы 
наша информация поступала к пользователю как можно быстрее, тогла зачем передавать 
лишнюю и несущественную информацию, такую как фоновый звук? 

Тем не менее, использовать звук или нет, — решать вам. Для тех. кто все-таки решит 
использовать такую возможность, в табл. 3.3 приведены все параметры элемента ВСЅООМР. 


Таблица 3.3. Атрибуты элемента ВС$ОУМО 


Атрибут Описаниє Значение Пример 

БЫС Задает УВЕ звукового файла, кото ОАІ згс="вопа.тіаі" 
рый должен быть встроен в документ 

Ба1апсе Стереобаланс от-10000 до 10000 

10ор Число повторов: если равно -1, то целочисленное зна- 
повторяется бесконечно чение 

уо1чпе Громкость. Нулевое значение соот- от -10000 доб Уоїште=" -2000" 


ветствует максимальной громкости, 


какую может воспроизвести обору- 
дование пользователя 
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Пример 3.2 


<ВСЗОИМР згс="зопс.тібі" 100р=*10" Ъа1апс 


" моїште="-2000"> 


Встраивание произвольных объектов 


В языке НТМЕ.2.0 имелась только одна возможность добавить мультимедийную инфор- 
мацию на Меб-страницу — это был элемент ІМО. Но он позволял добавлять только изображе- 
ния, для остальных форматов путь в МБ был закрыт. Тогла разработчики начали эксперимен- 
тировать и добавлять в своих браузерах поддержку новых элементов и атрибутов. В результате 
появился элемент ЕМВЕР от фирмы Мебсаре для встраивания других документов и элемент 
АРРЬЕТ от фирмы Ѕип для встраивания выполняемых программных кодов на языке Јауа, По- 
явление таких нововведений не решило всех проблем. Тогла было решено добавить в специ- 
фикацию НТМІ. новый элемент ОВЈЕСТ, обобщение элемента ІМО, позволяющий работать 
слюбыми форматами. При этом у пользователя на компьютере должно быть установлено 
приложение или дополнительный модуль к браузеру (плагин — ріџир-іп), позволяющий про- 
сматривать объект соответствующего формата. 


Элемент ОВЈЕСТ 


Элемент позволяет встроить в НТМІ -документ любой объект заданием ОК. встраи- 
васмого объекта и инициализировать его (задать начальные значения необходимым па- 
раметрам), указав набор параметров с помощью внутреннего элемента РАВАМ, Кроме 
этого, есть атрибуты, позволяющие задавать стандартные свойства, такие как ширина и 
высота поля на странице, выделенного под объект. 

В последние несколько лет стала популярной технология Еаѕћ. Этот программный про- 
дукт от фирмы Масғотейіа позволяет создавать качественную векторную анимацию для Ин- 
тернет (ну кто не знает мультсериал про Масяню и ее друзей?), а также позволяет создавать 
интерактивные МеБ-приложения разного назначения, в том числе и игры. Специальный эле- 
мент ОВЈЕСТ сушествует именно для того, чтобы на У\еБ-страницу можно было добавить 
Разв-ролик, видео или Јауа-аплет (Ме-приложение. написанное на языке Јауа) и др. 

Давайте рассмотрим применение этого элемента на примере добавления Е1аѕћ- 
ролика, поскольку на сегодняшний день именно их чаще всего приходится добавлять на 
страницу. Для просмотра Е1аѕћ-ролика в вашем браузере должен быть установлен допол- 
нительный модуль — Р!азН-р!ауег. Последнюю версию этого плагина можно скачать на 
сайте производителя ћсер : / /млили . тасготедіа . сот. 

Допустим, у нас имеется Ғіаѕһ-ролик, который хранится в файле тоуіе.эмЁ. Пусть 
он создан в пятой версии данного программного продукта. На момент написания этой 
книги последней версией была седьмая. Это означает, что в браузере посетителей сайта 
должна быть установлена любая версия НазН-плейера старше пятой, тогда они смогут 
просмотреть такой объект. 

Попробуем встроить такой объект моу1е.змЁ с помощью элемента ОВЈЕСТ. Если 
в браузере пользователя установлен необходимый плейер, то браузер определит его наличие 
по специальному идентификатору, который указывает в качестве значения атрибута с1аѕ5іа. 
Для Ріаѕћ-плейера этот атрибут задается следующим образом: с1аѕ5ід="с1518:027С0В6Е- 
АЕбО-11сЕ-9688-444553540000". Если такой плейер не установлен, то браузер может его 
автоматически скачать с сайта производителя, лля этого надо указать значение атрибута 
содеьазе, в который помещается О ВЕ, по которому его можно скачать. В нашем случае этот 
‘атрибут задается так: 
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содеъазе=ВЕЕр: / /доут1оаа .тасготейіа .сот/рир/=ћоскмаме/сарз/ #1аѕћ/ 
ѕыҒ1азћ.саБ#уегѕіоп=5,0,0,0 

Атрибут с1аѕзіа может использоваться вместе с атрибутом даба или как альтерна- 
тива ему, в зависимости от типа объекта. 

ОК. самого встраиваемого объекта задается атрибутом даба. В нашем случае объект 
будет воспроизводиться не самим браузером, поэтому атрибут даба задавать не будем, а 
ОКЕ объекта передадим в качестве параметра самому плейеру. В самом элементе ОВТЕСТ 
также требуется задать МІМЕ-тип встраиваемого объекта: содесуре= "арр1ісаріоп/ 
х-5ѕћоскмауе-Ғ1аѕһ". (Что такое МІМЕ-типы и как они задаются, рассказывается 
подробнее в разделе “МІМЕ-типы”, ниже в этой же главе.) Далее задаются стандартные 
параметры ширины и высоты поля, отводимого под объект на М№еБ-странице. Допустим, 
что это такие значения: міаећ= "250", пеісће= "200". Рамка вокруг объекта нам не 
требуется, поэтому зададим атрибут рогӣег= "0". Атрибут ѕсапаьу задает альтернатив- 
ный текст, который отображается в момент загрузки приложения. 

Получим такой код: 
<0ВЈЕСТ с1азѕід="с15і4:027С0В6Е-АЕ6р-11с#-9688-444553540000" 

/доит1оаа .таскотеаза .соњ/риЬ/ =ћоскмауе/сарз/ #1аѕћ/=Ғ1аѕһ.са 
0,0,0" міаєћ= "250" Һеісһ="200 содегуре="арр1ісасіоп/х-=һоскмаме- 
ЕЛазВ" збапдЬу= "Подождите. Приложение загружается 


.. задание параметров для Е1азБ-плейера .- 
</ОВОЕСТ> 


Элемент РАКАМ позволяет залавать значения начальных параметров, которые в свою 
очередь могут быть переданы Е1аѕһ-плейеру или другому приложению. Набор элементов 
РАКАМ помещается между открывающим и закрывающим тегами <ОВЈЕСТ> и 
</0ВЈЕСТ>. Учтите, что элемент РАБАМ является пустым, поэтому не должен иметь за- 
крывающего тега. 

В нашем случае набор параметров будет таким: 
<РАВАМ папе="тоузе" УАБОЕ="Е31е: ///С:/НТМЬ-ЕиЕог4а1 /моме.виЕ"> 
<РАВАМ папе="спа1ібу" УАШЈЕ="Һісһ"> 
<РАКАМ паше="Басо1ог" УАШЈЕ="#000080"> 

Первый задает файл-источник объекта. Имейте в виду, когда работаете на жестком 
диске, лучше пользоваться полным путем к файлу, причем названия всех папок и файлов 
в этом пути не должны солержать русских букв. В нашем примере файл хранится на ло- 
кальном диске С: в папке НТМІ.-Собогіа1. 

Второй параметр задает качество отображения ролика как высокое (һісћ). Допусти- 
мо также задание среднего (те@ т) и низкого качества (1ом). Тогда качество прорисов- 
ки векторных объектов будет ниже. 

Третий задает цвет фона для области отображения объекта. Можно указывать цвета 
по имени или коду. Код #000080 соответствует темно-синему цвету. Цвет фона лучше 
задавать максимально близким по цвету к тону самого объекта. Пока объект будет загру- 
жаться, пользователь на его месте будет видеть прямоугольник заданного размера с одно- 
тонной заливкой и альтернативный текст атрибута эсапаБу. 

Полный код, добавляющий Р!азН-ролик на страницу, будет следующим: 
<ОВЗЕСТ с1аз519=“с1514:027СОВбЕ-АЕбР-11с#-9688-444553540000" 
соеБаве="НВЕЁр: / /дохт1оай .тасгопедіа .соп/риЫ/ћоскмаме/саЬ=/ Ё1аѕћ/=нҒ1аѕЬ.саЬ 
#уегвіоп=5,0,0,0" міаєћ="250” Һеісһс="200 содебуре= "арр1ісасіоп/х-єһоскмаме- 
Е1азВ" ѕсапдру="Подождите. Приложение загружается" > 
<РАВАМ МАМЕ="поуіе" УАБОЕ=" ҒіЛе: ///С: /НТМ-Сисогіа1 /поуіе.ѕыЁ"> 
<РАВАМ МАМЕ="сца1ібу" УАШЈЕ="Һі9һ"> 
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<РАВАМ МАМЕ="Басо1ок" УАГОЕ="#000080"> 
</0ВЈЕСТ> 


В табл. 3.4 приведены сводные данные по элементу ОВЈЕСТ. 


Таблица 3.4. Атрибуты элемента ОВЈЕСТ 


Атрибут Описание Значение Пример 

с1аѕѕіа Содержит ИЕ описания ти- ЦВ! с1а5514="с1514:027СОВбЕ- 
рм аса АЕ60-11с#-9688-444553540000" 
или может служить заменой 
атрибута даїа 

сойеравеѕ Содержит ОА! того прило- ЧОВ. содеБазе="ВЕЕр: / /домп1оай. 
жения, которое необходимо пасгопедіа .сот/риь/ћоскмаме/ 

Ў саБз/{1авЬ/зи1азВ. 

т Ию саріуехвіоп=5,0,0,0" 

соекуре Содержит МІМЕ-тип объек- МІМЕ-тип содесуре="арр1ісасіоп/ 
та, т.е. определяет, что это х-апоскиаме-езави" 


за объект: видеоролик, 
Паѕћ-ролик, аплет и пр. 


даса Задает УВЕ встраиваемого ЦВЕ даса= "поуіе . ви" 
объекта 

всапару Содержит текст, который текст вбапару= "Объект загружается. 
может отображаться брау- Подождите, пожалуйста. " 
зером, пока загружается 
объект 

уіагсћ, Высота, ширина, толщина значение міасћ= "250" һеісһс="200" 

везаве, рамки вокруг объекта Богдег="0" 

Бохдех (аналогично рисункам) 

а1ідп Выравнивание объекта. 1еғе, гісће, аїісп="сепсег" 

сепсег 
Элемент ЕМВЕО 


Элемент ЕМВЕР, аналог элемента ОВЈЕСТ, — нововведение в язык НТМІ. от №еіѕсаре, 
Корпорация Миегозой также решила его подлержать, поэтому этот элемент частично 
поддерживается /Е. Но все-таки для встраивания нестандартных объектов лучше пользо- 
ваться элементом ОВЈЕСТ. 

Элемент ОВЈЕСТ появился позднее ЕМВЕР, поэтому элемент ЕМВЕР иногла использу- 
ют для старых версий браузеров. которые еще не поддерживают ОВЈЕСТ, но таких сейчас 
уже единицы. 

Синтаксис элемента ЕМВЕР такой: 
<ЕМВЕЮ вгс="с1ір.ауі"> 
<МОЕМВЕР> Ваш браузер не поддерживает встраиваемые объекты< /МОЕМВЕР> 
</ЕМВЕР> 

Атрибут ѕгс, аналогично одноименному атрибуту элемента ІМС, задает КІ. встраи- 
ваемого объекта. Элемент МОЕМВЕР используется с целью задания альтернативного со- 
держания для еще более старых браузеров, которые не поддерживают и элемент ЕМВЕР. 
Вообще говоря, они не поддерживают и элемент МОЕМВЕР, просто они проигнорируют 
весь незнакомый сму код и отобразят понятный ему. Это и есть простой текст — содер- 
жимое элемента МОЕМВЕР. 
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Атрибуты а1ідп, а16, Богдег, міасћ, һеідһе, Һѕрасе и уѕрасе аналогичны эле- 


менту ІМС. 


Не будем подробнее останавливаться на атрибутах, просто приведем их в табл. 3.5 
с примерами использования, 


Таблица 3.5. Атрибуты элемента ЕМВЕО 


Атрибут Описание Значение Пример 
ЗС Задает ВІ объекта, который ЧАІ с1ір.ауі" 
должен быть встроен в доку- 
мент 
аїс Задает текст, который будет текст а1с="Фото семьи, 
выводиться на месте изо- совершившей покупку" 
бражения в том случае, если 
отображение рисунков от- 
ключено 
мідећ, Задают высоту и ширину значение в рхили% _ мїаеһ= "250" 
Ћеідһће объекта ћеі9ће=*200" 
Богдег Устанавливает толщину рам- значение Бохдек="0* 
ки вокруг объекта. 
узрасе, Указывают значения верхне- значение в рхили% Узрасе= "10" 
Вврасе го, нижнего, правого и лево- пзрасе= "5" 
го полей объекта 
аід Определяет способ вырав- бор, а1ісп="гідћс" 
нивания объекта на странице тіаа1е, 
Ъобкот, 
1еғе, 
гідће 
р1ішдіпвраде АІ Мер-страницы, содер- УВЕ р1цдіпараде= "Ок" 
жащей инструкции по ин- 
сталляции модуля 
Суре МІМЕ-тип встроенного объ- МІМЕ-тип буре="арр1ісасіоп/ 
екта, определяющий модуль, х-5һосКмауе- 1авһ" 
который необходимо загру- 
зить. Используется для мо- 
дулей, которым не требуются 
данные 
аусовсагс Указывает, надо ли сразу бое (надо) аусовсагс= "гие" 


проигрывать загружаемый 
Файл 


Еа1ве (не надо) 


Приведем пример кола, который добавляет на страницу тот же Е1аѕћ-ролик, но с ис- 
пользованием элемента ЕМВЕР. 
<ЕМВЕР згс=*іЛе: ///С: /НТМ-Бибогіа1/поуіе. зн" спа1ібу="Һісһ" 


Ъссо1ог= "#000080" мідсћ= "250" Һеісһће="200" буре="арр1ісабіоп/ 
х-ѕһоскмауе-#1аѕћ" 


р1џдіпераск 


р1 Ргой Уегѕіоп=5ћосктауеР1аѕһ"></ЕМВЕр> 
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Часть 1. НТМЕ 


'НЕЕр: / лл. пасгопедіа .сот/зноскмауе/аонт1оаа/1п4ех.с91? 


МІМЕ-типы 


Когда мы встраиваем в НТМІ -документ некий объект, браузер пытается отобразить его 
самостоятельно. Если это простой текст (сам НТМІ -код является текстом) или рисунок, то 
браузер может это сделать без посторонней помощи. Если объект незнакомый, то браузер 
может прибегнуть к помощи внешней программы или встроенного в браузер программного 
модуля (плагина), которые отобразят этот объект. Обычно прикладная программа, которой 
надо передавать объект, определятся по расширению файла (.дос — файл Могӣ, .ехе — 
выполняемый файл, .Һет1 — документ НТМ!) и отправляется в браузер. Когда получаем 
такой файл из Интернет, то сначала браузеру передается МІМЕ-тип объекта, который гото- 
вится к передаче по каналу связи, чтобы браузер заранее мог определить тип приложения, 
которое ему потребуется. Если такого приложения у него нет, то появится сообщение о том, 
где его можно скачать и как установить. Как минимум, это позволит не закачивать файл на 
компьютер, если вы все равно не сможете его просмотреть, либо вы установите необходи- 
мые программные модули и после этого просмотрите объект. 

МІМЕ (Миніригрохе Ітіегле! Май Ехіепѕіопѕ, Многоцелевые расширения почты Ин- 
тернет) — это стандарт, изначально разработанный для передачи файлов по электронной 
почте. Но впослелствии он стал применяться и для других сервисов Интернет, в том чис- 
леи для Мер. Более общее для МІМЕ-типов название сейчас — мегпег Мейа Турез. 

Перечень МИМЕ-типов довольно большой, в табл. 3.6 приведены лишь наиболее по- 
пулярные и часто используемые. 


Таблица 3.6. Основные МІМЕ-типы 


Тип файла Расширение МІМЕ-тип 
Архив в формате 92 92 аррісабог/х-огір 
Архив в формате 21Р 21р аррісайоп/х-гір-сотргеѕѕед, 
аррісайоп/лір 
Архив в формате їаг саг аррісайогу/х-їаг 
Аудиозапись АЦ -аы ацбіо/Баѕіс 
Аудиозапись МОТ тіа аидю/пиа 
Аудиозапись МРЗ 1р3 аидю/тред 
Аудиозапись МАУ мау аидюлмам 
Видеоклип в формате АМ ауі маео/х-теміадео 
Видеоклип в формате МРЕВ „пред, „пра  мдео/тред 
Видеоклип в формате ОџіскТіте поч мдео/диските 
Документ в формате НТМЕ „Вела, „Ве ехі/һіті 
Таблица стилей С55 :с88 1ехі/сѕ5 
Документ в формате Місгоѕой Ехсе! -х1= арріісайоп/х-тѕехсеї 
Документ в формате Місгоѕоћ Мога дос арріісайоп/тмога 
Документ в формате ра! -рағ аррісабоп/ра? 
Изображение в формате ВМР лр ипадельтр, 
Изображение в формате ОЕ „91+ ипаде/ой 
Изображение в формате /РЕС -јра, -јрея  итадедред 
Изображение в формате РМС -рп9 ипаде/рпа 
Исполняемый файл для 20$ или «сон, саки арріісабоп/осїеі-ѕігеат 
Місгоѕой МИпбомѕ 


Глава З. Графика, звук и мультимедиа 


75 


Окончание табл. 3.6 


Тип файла Расширение МІМЕ-тип 

Текстовый документ хі Хеху/ріаіп 

Трехмерная интерактивная графика -мт1 х-мюпа/х-мті 

в формате УВМЕ 

'Аази-ролик -5мЕ арріісайоп/х-ѕһоскмаме-Паѕіһ 
Місговоћ Ј8сгірі ЕБ леху/Јәстірі 

Місгоѕоћ ЈЅсгірі -і5 лех/амазсири 

Місгоѕоћ МВ5стірі Уз лех/\$ 

Місгоѕоб УВЅстірі -мЬ5 техі/мЫѕсгірі 


С некоторыми из этих типов мы еще будем встречаться по ходу изучения материала. 


Навигационные карты 


Допустим, у вас есть рисунок, содержащий изображения нескольких предметов, и вы 
хотите сделать так, чтобы по щелчку мыши на некотором предмете загружался документ, 
посвященный этому предмету, или выполнялось какое-то другое действие. Здесь можно 
поступить так: разрезать изображение на части, затем собрать их в одно целое, разместив 
в ячейках таблицы, и с каждого изображения оформить ссылку на нужный документ. Как 
известно, рисунки всегда имеют строго прямоугольную форму и не всегда можно разде- 
лить рисунок на четкие прямоугольники, если предметы имеют неправильную форму. 
В этом случае на помощь придут навигационные карты. 

Навигационные карты (иногла их также называют картами ссылок) позволяют сопос- 
тавить некоторой области встроенного в НТМ!-документ объекта некое действие 
(скажем, загрузку другого документа), которое выполняется в момент активизации этой 
области кнопкой мыши. Таким объектом может быть все, что можно встроить в НТМІ- 
документ при помощи элемента ОВЈЕСТ, в том числе и простой рисунок, видеоролик или 
аплет. Неотъемлемой частью любой карты ссылок является описание ее областей. 

Карты ссылок могут быть клиентскими и серверными. Описание областей клиентской 
карты ссылок хранится в самом документе, и после щелчка мышью в какой-либо его точке 
браузер сразу определяет, к какой области относятся координаты этой точки. Затем выпол- 
няется нужное действие в зависимости от того, в какой области находился указатель мыши. 
(Серверные карты работают по другому принципу. Сначала на сервер передаются координа- 
ты щелчка, затем специальная программа обрабатывает полученные значения и выполняет 
требуемые действия. В этом ключе использование клиентских карт предпочтительнее, так. 
как они доступны и пользователям неграфических браузеров и сразу позволяют определить, 
находится ли указатель в активной области или за ее пределами. 

Далее будем подробно рассматривать клиентские навигационные карты, созданные 
на основе изображений. 


Элементы МАР и АВЕА 


Для задания описания областей карты ссылок используется элемент МАР. Для него 
обязательны оба тега — и открывающий, и закрывающий. У него доступен единствен- 
ный атрибут пате, позволяющий задать имя карты ссылок и использовать его потом для 
ссылки на эту карту ссылок. Описание карты ссылок довольно трудоемкий процесс, 
и код этого описания также объемен. Одну и ту же карту можно подключить к несколь- 
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ким объектам при помощи атрибута иѕетар. Значение атрибута — имя карты ссылок. 
Покажем на примере изображения. 

<1Мб згс=*ітаде.сіє" изетар=“#Мар_папе"> 

<МАР папе="Мар папе"> 

- описание областей .. 

</МАР> 


Внутри элемента МАР для описания конкретной области используется элемент АКЕА. 
Атрибутом ѕһаре задается форма области. Допустимыми значениями являются: ае- 
Ғаџ1Є, гесе, сігс1еи ро1у: 


е егаи1е — обозначает всю область изображения; 
е гесЕ — определяет прямоугольную область; 

е с1гс1е — определяет круглую область; 

• ро1у — определяет многоугольную область. 


Для каждой области нужно задать ее координаты. Координаты задаются атрибутом со- 
огаѕ относительно верхнего левого угла объекта. Координата х отмеряется по горизонтали, 
координата у — по вертикали. Все значения ‘указываются в пикселях и отделяются друг от 
друга запятыми. Число и порядок значений координат зависят от заданной формы. 

Для прямоугольной области задаются координаты левого верхнего (ЛВУ) и правого 
нижнего (ПВУ) углов: 
тесЁ: х-координата ЛВУ, у-координата ЛВУ; х-координата ПВУ, у-координата ПВУ. 


Для залания круглой области достаточно указать координаты центра и длину радиуса 
окружности: 


сігс1е: х центра, у центра, радиус 


Радиус окружности может быть указан в процентах, тогда браузер пользователя дол- 
жен вычислять окончательное значение радиуса в зависимости от ширины и высоты объ- 
екта, заданных соответствующими ‘атрибутами. Радиус вычисляется относительно наи- 
меньшего из этих двух значений. 

Для многоугольника необходимо по очереди задать координаты всех его вершин: 


Чтобы не путаться, можно указывать координаты одной точки без пробела и отделять 


их символом пробела от координат следующей точки. Приведем пример задания тре- 
угольника: 


ро1у: х1, у1, х2, у2 


<МАР пате="Мар_ папе"> 

<АВЕА Бһаре="ро1у" соогдѕ="74,83, 82,91, 35,91"> 
-- описание других областей .. 

</МАР> 

Атрибут ћсеғ задает КІ. связанного с данной областью ресурса, на который может 
быть осуществлен переход после щелчка на данной области. Альтернативный текст зада- 
ется при помощи атрибута а1 Е. Не забывайте, что текст атрибута а1 є будет отображаться 
в полсказке, это позволит пользователю понять, что обозначает данная область карты 
ссылок. Поэтому заданием значений атрибута а1 Е не стоит пренебрегать. 

Давайте рассмотрим такой пример. У вас есть карта России в виде изображения 
пар гиѕѕіа.9іё, где изображены все округа: Центральный округ, Северо-западный, 
Волго-Вятский, Уральский и т.л. Нам требуется с изображений каждого округа связать 
ссылку на НТМЕ-документ, в котором в виде списка будут представлены все области, 
республики и другие единицы, входящие в состав этого округа. 
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Вот пример такого изображения, где на экран уже выведена одна из подсказок. 


Рис. 3.6. Карта ссылок со всплывающей подсказкой 


Прямоугольные и круглые области описать достаточно просто, но в данном примере они 
нас не спасут, тут необхолимо использовать многоугольники с большим количеством вершин, 
чтобы как можно точнее описать форму каждого округа. Выполнить такую работу вручную 
точно и с первого раза практически невозможно. Тут на помощь может придти такой инстру- 
мент, как ІтареКеаду — программный продукт от фирмы Адобе, производителя Рћоќоѕћор. 
В общих чертах ІтареЌеаду представляет собой урезанный в обычных возможностях (по 
сравнению с Рћоіоѕћор) графический редактор, но обогащенный функциями подготовки гра- 
фики для Интернет. Это в первую очерель возможность разрезания готового изображения, оп- 
тимизация изображений и возможность одновременной оценки качества, создание анимиро- 
ванных изображений в формате СІР. В том числе имеется и возможность созлавать карты 
ссылок. Вам нужно только с помощью специального инструмента “обвести” каждую область, 
задать ее название и другие параметры. После этого можете получить готовый НТМІ.-код 
савтоматически построенным описанием всех заданных областей, 

Надо сказать, что даже при помощи ІтареКеайу решение этой задачи отнимает много 
времени, ведь число вершин многоугольника исчисляется десятками. Обводку областей 
нужно задавать достаточно точно, чтобы они не пересекались, и в то же время не должно 
быть пробелов между областями. Иначе, если указатель мыши попадет в пустой участок, 
переход на другой документ не будет осуществлен. Если указатель попадет в область пе- 
ресечения двух областей, то может возникнуть ошибка, так как браузер не сможет опре- 
делить, какую из двух областей обрабатывать и кула должен осуществляться переход. Как 
видите сложностей много, но когда их преодолеете, то получите такой код: 
<ІМО эгс=*пар_гозѕіа.сіе" міаєһ="408" Һеіс̧һ="246" Богаег="0" а1с=" Карта 
России по федеральным округам" изетар=“" #гиѕвіа"> 
<МАР пате="гивзіа"> 

<АВЕА &һаре="ро1у" а16="Дальневосточный федеральный округ" соогӣв="274,83, 
282,91, 285,91, 

~ остальные координаты вершин многоугольника." Вкеё="да1пеуовеок. Нет "> 

<АВЕА вһаре="ро1у" а1с="Восточно-Сибирский Федеральный округ" 
соогӣв="223,233, 224,226, 

=. остальные координаты вершин многоугольника..." 

Ћгеғ="үуоѕсвіріг.Һт1"> 
- описание областей для остальных округов .. 
</МАР> 

В файлы да1пеуозёок.Һет1, уоѕезіріг.һҺіт1 и другие нужно поместить списки 
входящих в эти округа областей и республик. Тогда наша карта ссылок будет работать та- 
ким образом: пользователь шелкает на изображении Дальневосточного округа и браузер 
загружает файл да1пеуоѕбок .ВЕт1. Пользователь видит нужный ему список. 
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Глава 4 


Таблицы 


В этой главе ... 

> Создание таблиц 

> ЭлементТАВІЕ 

> Элемент САРТОМ — название таблицы 

> Элемент ТК — строки таблицы 

> Элементы ТО иТН — ячейки таблицы 

> Создаем сложную табличную структуру 

> Некоторые особенности при работе с таблицами 
> Алгоритмы обработки таблиц 


Создание таблиц 


Вот мы и подошли к одному из самых объемных и, не побоюсь этого слова, фунда- 
ментальных разделов языка НТМ!. — созданию таблиц. Значимость таблиц для МеБ- 
дизайна трудно переоценить. Как уже упоминалось ранее, только с помощью таблиц 
можно точно позиционировать объекты на странице, что позволяет создавать страницы 
со сложным дизайном, помимо обычного своего назначения — прелставления информа- 
ции в структурированном виде. 

„Любая таблица представляет собой набор строк и столбцов, на пересечениях которых 
находятся ячейки. В идеале в каждой строке находится одинаковое количество ячеек, 
в столбцах таблицы их тоже, как правило, одинаковое количество. Это простейший слу- 
чай. Примером может служить вот такая таблица. 


Заголовок первого столбца Заголовок второго столбца Заголовок третьего столбца 


1 ячейка 1 строки 2 ячейка 1 строки Зячейка 1 строки 
1 ячейка 2 строки 2 ячейка 2 строки Зячейка 2 строки 
1 ячейка 3 строки 2 ячейка З строки З ячейка З строки 


В ней три столбца и четыре строки. Первая строка особенная, в ее ячейках содержатся 
заголовки столбцов. Такая строка или группа таких строк называются обычно заголов- 
ком или шапкой таблицы. Под шапкой располагаются ячейки с данными, это тело таб- 
лицы. У некоторых таблиц бывает еще и завершающая часть. Она часто встречается 
в финансовых отчетах или тому подобных документах, где в последних строках подводят- 
ся итоги (за месяц, квартал или год). Рассмотрим конкретный пример. 


Таблица 1. Выплаты заработной платы 


Ф.И.О. Месяцы 

Январь Февраль Март 
Перепелкин Василий Иванович 4000р. 4500р. 4200р. 
Юдаков Сергей Петрович 3500р. 3900 р. 3600 р. 
Петрова Вера Сергеевна 5800 р. 6000 р. 6100 р. 
Итого: 13 300 р. 14 400 р. 13 900 р. 


У этой таблицы есть название: Таблица 1. Выплаты заработной платы. Количество яче- 
ек в строках и столбцах этой таблицы различается. Некоторые ячейки объединены: две 
ячейки в одном столбце для написания аббревиатуры Ф.И.О., три ячейки в одной строке 
для написания слова Месяцы. Шапка таблицы состоит из двух строк. У таблицы есть за- 
вершающая часть с общими итогами по месяцам, иногда ее называют нижним заголов- 
ком таблицы. 

Для создания таблиц в языке НТМЕ используются следующие элементы: = 


® ТАВЬЕ — создает таблицу; 

е САРТІОМ — залает заголовок для таблицы; 

• ТВ — задает строку таблицы; 

• ТН — задает ячейку таблицы, заголовок столбиа; 

• тр — задает простую ячейку таблицы с данными; 

• ТНЕАР, ТВОБУ, ТЕООТ — элементы группировки строк; 
• СОГСВОПР, сог, — элементы группировки столбцов. 


Рассмотрим эти элементы по очереди. 


Элемент ТАВІЕ 


В языке НТМІ. для создания таблиц служит элемент ТАВЬЕ. Весь код таблицы должен 
располагаться между тегами <ТАВЬЕ> и </ТАВЬЕ>. Атрибуты этого элемента задают па- 
раметры для всей таблицы целиком. 

Сама таблица формируется построчно. Элемент тк (ТаЫе Ком — строка таблицы) от- 
вечаст за создание строки таблицы. Внутри него может размешаться несколько ячеек, 
создаются они при помощи элементов тр (ТаЫе Оаіа — данные таблицы) или тн (ТаЫе 
Неайег — заголовок столбца таблицы). Количество элементов ТВ должно совпадать с ко- 
личеством строк таблицы. Количество элементов тр или тн внутри элемента ТЕ должно 
совпалать с количеством столбцов (если не требуется залавать объединение ячеек). 

Рассмотрим простой пример. Создайте новый НТМІ.-документ и назовите его 
Еаб1ез.НВ еп (за основу можно взять любой ранее созданный нами документ — скопи- 
руйте его и удалите старое тело документа). Пользуясь этим документом, мы будем экс- 
периментировать с таблицами. Поместите в тело документа НТМЁЕ-код таблицы 


(пропускайте номера строк): 

1. <ТАВЬЕ Богаег> 

2. «тю 

3. «Тр>А1</Т0> <Тр>В1</Тр> <ТО>С1</ТО> 
4.  </ТВ> 
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5. «т 
6.  <ТО>А2</ТР> <ТО>В2</ТО> <Тр>С2</Тр> 
7.  </ТВ> 
В. </ТАВІЕ> 
Такой НТМІ -код сформирует в окне браузера таблицу, подобную приведенной 
на рис. 4.1. 
А1 ВІСІ 


Рис. 4.1. Пример простейшей НТМІ.-таблицы А2 22 С? 


Давайте разберемся, что значит каждая строка такого кола. 

Первая строка кода содержит открывающий тег элемента ТАВІЕ с единственным бу- 
левым атрибутом Бохаег, который “включает” отображение границ между ячейками 
таблицы. Граница эта объемная (эффект основан на разнице цветов различных границ от 
светло-серого до черного). Если атрибут Бокаег не указать, границ не будет совсем. Вто- 
рая строка содержит открывающий тег элемента ТВ, начиная тем самым первую строку 
таблицы. Третья строка содержит три элемента Тр, задающих вместе со своим содержи- 
мым три ячейки первой строки: А1, В1 и С1. Четвертая строка содержит закрывающий 
тег элемента ТК, соответствующий открываюшему тегу из второй строки. Пятая, шестая 
и седьмая строки вместе задают вторую строку таблицы и содержимое ее ячеек; А2, В2 
и С2 — аналогично строкам кода 2-4. Восьмая строка содержит закрывающий тег эле- 
мента ТАВЬЕ, соответствующий открывающему тегу из строки 1. 

Остановимся подробнее на общих свойствах таблицы, которые залаются атрибутами эле- 
мента ТАВЬЕ. Атрибут Богдег с указанным значением в пикселях заласт толщину границы 
(Богаег="1"). При этом нужно заметить, что граница у ячеек в примере двойная и между 
ячейками есть расстояние (рис. 4.2). Расстояние между ячейками таблицы регулируется атри- 
бутом се115расіпо (Се! — ячейка, зрасе — пространство). Значение се11врас1па="0" 
сократит это расстояние до минимума, и после этого эффект “двойной” границы исчезнет. 


| — внешняя граница таблицы 


|--- — внешняя граница ячейки 


сейерасіцв — расстояние 
‘между ячейками 


сеШраййіпв – поля внутри ячеек 


Рис. 4.2. Строение ячеек таблицы с отступами и границами 


Можно регулировать и расстояние от границы ячейки до ее содержимого — отступы. 
Делается это при помощи атрибута се11раддіпо (Се! — ячейка, раййіпе — заполнение, 
пустое поле). Если указать конкретное значение, например, се11рааа1та="20", то внут- 
ри ячейки появятся пустые поля размером 20 пикселей. Такое большое значение выбрано 
специально, чтобы различия были более очевилны. Советую добавить новые параметры 
к коду и посмотреть, что получится. Первая строка кода будет теперь выглядеть так: 
<ТАВІЕ Богдег="1" се11зрасіпо="0" се11радаіпа="20"> 


код строк и столбцов таблицы.. 
</ТАВІЕ> 
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При этом исчезнут расстояния между ячейками и появятся поля внутри ячеек размером 
в 20 пикселей. Такая таблица в окне браузера будет выглядеть так, как показано на рис. 4.3. 


А в1 с 


Рис. 4.3. Таблица с расширенными от- 
ступами и смыкающимися ячейками 


Выровнять таблицу на странице позволяет уже знакомый атрибут а1 дп. Допустимы 
три значения: 1еЕ%, гідће и сепёег. 

Атрибут 1 ЕВ позволяет регулировать ширину таблицы. Значения для этого атрибу- 
та можно задавать в пикселях или процентах от ширины экрана. При залании ширины 
в пикселях, например міасћ= "400", размер таблицы фиксируется жестко. Независимо 
от того, какое разрешение экрана будет у пользователя, таблица всегда будет иметь раз- 
мер ровно 400 пикселей в ширину. Задание ширины таблицы в процентах позволяет 
адаптировать ее к разрешению экрана пользователя. 
<ТАВЬЕ Ьогдег="1" се11зрасіпо="0" се11рада1иа="20" а1ісп="сепбег" 
мідсћ="50%"> 

код строк и столбцов таблицы. 
</ТАВЬЕ> 

Таблица с такими параметрами будет располагаться по центру страницы и в ширину 
будет равна половине экрана — независимо от того, какое разрешение монитора стоит у 
пользователя (рис. 4.4). 


ГЗ се авс ни, Меховой моих Е о Сі 
Ғе Еб Мем Рамо: Тоби Ней. 

вон 9 0 1 2 зә Шайы Фев 09 \- $ И" 
Аобе [Е] С\мчтевекыт = 1 962 Сыљи» 


== = я = 


Рис. 4.4. Отцентрированная таблица размером ровно в половину 
‘окна браузера 


Ширину столбцов, в отличие от ширины таблицы, можно задавать пропорционально 
другим столбцам. Если для одного из них указать значение ширины міаєћ="1*", а для 
другого міаєћ="3* ", это означает, что второй столбец будет в три раза больше первого. 
Такие значения позволят разбить на пропорциональные друг другу столбцы таблицу, об- 
щая ширина которой задана в элементе ТАВІЕ. 
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Фон таблицы или даже каждой ее ячейки может отличаться от основного фона страницы. 
Это может быть однородная заливка или же фоновый рисунок. В элементе ТАВЬЕ эти пара- 
метры задаются для всей таблицы целиком. Атрибут Басо1 ох задает цвет фона (указывается 
по имени или кодом цвета), например басо1ог= "эћі се". Фон таблицы при этом будет бе- 
лым независимо от того, какой фоновый цвет задан для всей страницы целиком. 

Фоновое изображение задается атрибутом раскагочпа, по аналогии с тем, как и фоно- 
вое изображение для всей страницы целиком. В качестве значения указывается ЦВ. того 
изображения, которое нужно использовать в качестве фона, например раскогоџпа= 
"іпасев /ро. оі". 

Существуют атрибуты для задания цвета границ таблицы, специфичные только для 
браузера Имегпее Ехріогег (т.е. другими они не поддерживаются и просто игнорируются). 
Как мы уже ранее замечали, границы таблицы в НТМІ. имитируют объемность, и дости- 
гается это использованием двух цветов: светлого и темного. В Имегпе Ехріогег атрибуты 
Богаегсо1ог и рогдексо1огдӣагк позволяют конкретно определить эти цвета: 


• Богаексо1ог — задает светлый цвет границ таблицы; 
• Богаегсо1окаакк — цвет темной границы. 


Имейте в виду, чтобы увидеть объемную границу у таблицы, ее толщина должна быть 
не менее 2 пикселей, иначе на экране будет просто невозможно нарисовать две линии 
разного цвета. Вот пример, в котором для браузера 1ицегпе! Ехрюгег описывается таблица 
с цветной объемной границей, толщиной 3 пикселя (рис. 4.5): 
<ТАВІЕ Богдег= "3" Богаексо1ок="дкау" Бокдегсо1окдакк="БЛаск"> 


-код строк и столбцов таблицы. 
</ТАВІЕ> 


Рис. 4.5. Таблица с цветной объемной границей 


Немного забегая вперед, скажем, что существуют элементы группировки строк и 
столбцов таблицы. Это элементы: 


• ТНЕАР” — группа строк заголовка таблицы; 

• твору — группа строк основной части таблицы; 

• ТЕООТ — группа строк нижней части таблицы (нижний заголовок); 
• СОГСВОЧР — группа столбцов; 

• сог — подгруппы столбцов. 


Если при создании таблицы использовали эти элементы, то можно будет задать вид 
границ между группами строк и столбцов. Для регулирования границ существуют два ат- 
рибута: Егате и си1ез. 

Атрибут Ғгате задает тип рамки вокруг таблицы. Допустимы следующие значения: 

® уоіа — границ нет (это значение по умолчанию); 

® аБоуе — только верхняя часть границы; 

е Бе1ом — только нижняя часть; 


е Һѕідеѕ — только верхняя и нижняя части; 
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• уѕіаеѕ — только левая и правая части; 

е 115 — только левая часть; 

® гһѕ — только правая часть; 

• Бох — все четыре части. 

Атрибут ги1еѕ задает внутренние границы таблицы (между ячейками). Допустимы 
следующие значения: 

~ попе — нет границ между ячейками (это значение по умолчанию); 


• сгоцрѕ — только между группами строк, заданных элементами ТНЕАР, ТЕООТ 
и ТВОБУ, и группами столбцов, заданных элементами СОІСВООР и СОТ; 


• гомѕ — только между строками; 

® со1ѕ — только между столбцами; 

• а11 — отображаются все границы между строками и столбцами. 

Как только создадим первую таблицу, вы сможете поэкспериментировать, задавая 
разные значения для этих атрибутов элемента ТАВГЕ. В дальнейшем для выполнения тех 
же функций будем использовать каскадные таблицы стилей. 


А теперь подвелем итоги — приведем все атрибуты элемента ТАВЬЕ в единой таблице 
(табл. 4.1) с примерами задания им значений. 


Таблица 4.1. Атрибуты элемента ТАВІЕ 


Атрибут Описание Пример 
Вогаег Ширина рамки вокруг всей таблицы Ъогӣег- 
Ъасо1ог Определяет цвет фона ячеек таблицы Басо1ог=“ираее" 
Ъаскатоипа Позволяет заполнить фон таблицы ри- БаскотоипЗ= "іладеѕ/Ьс.сіЁ" 
сунком. В качестве значения необходи- 
мо указать ИВЕ рисунка 
Богдегсоїог Определяет цвет рамки (светлый цвет Богаегсо1ог= "атау" 


для объемной)“ 


Бог4ексо1охаакк Определяет темный цвет рамки (тень Богӣегсо1огдагк= "аск" 


для объемной)" 
міаєћ Ширина таблицы міаен="100%" 
а1ідп Леғё, гіс, сепеек — выравнивание а1ісп="сепгег" 
таблицы относительно текста 
ма1ідп Задает вертикальное выравнивание для “Уа1ісп= "Бор" 
всех ячеек таблицы““: 
сор — данные ячейки сдвигаются 
вверх; 


тіад1е — данные ячейки центрируются 
вертикально (это значение по умолча- 


нию); 
БоЕЕом — данные в ячейке сдвигаются 
вниз 
се115ѕрасіпд Расстояние между ячейками 
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Атрибут Описание 


се11раддіпо Пустое расстояние между текстом и 
внутренней границей ячейки 


Егапе Задает вид рамки вокруг таблицы; до- Ёгате="а11" 
пустимые значения: уоіӣ, аБоуе, 
Бе1ом, һѕійеѕ, уѕійез, №5, гз, рох 
(см. их значения выше) 


гше= Задает тип внутренних границ между то1ез="попе" 
ячейками: попе, дкоцре, коз, со15, а11 
(см. их значения выше) 


* Внимание! Только для и\егпе! Ехріогег! 
** Поддерживается браузерами ІЕ и ММ. 


Элемент САРТЮМ — название таблицы 


У таблицы может быть название. Оно не принадлежит непосредственно к табличным 
данным, а располагается перед таблицей или после нее. В НТМЕ название таблицы задает- 
ся при помощи элемента САРТТОМ, который должен находиться внутри элемента ТАВЬЕ. 
<ТАВЬЕ> 
<САРТТОМ>Название таблицы</САРТТОМ> 
код строк и столбцов таблицы 
</ТАВЫЕ> 

У элемента САРТТОМ есть один атрибут а1 ісп, позволяющий задать его расположе- 
ние: над таблицей (сор) или под таблицей (бос сог). Браузер Ницегпе! Ехріогег поддержи- 
вает дополнительные значения атрибута: 1еЕ Е, х1аЪЕ или сепеег. Описание атрибута 
элемента <САРТТОМ> с примером приведено в табл. 4.2. 


Таблица 4.2. Атрибуты элемента <САРТІОМ> 


Атрибут Описание Пример 
а1ідп сор — название находится вверху таблицы (это значение по а1іоп=*Боссот" 
умолчанию). 


оксоп — название находится внизу таблицы 


Элемент ТВ — строки таблицы 


В языке НТМІ. таблицы формируются построчно. Элемент ТВ создает строку табли- 
цы, а его атрибуты задают параметры для всех ячеек в этой строке. Можно задать гори- 
зонтальное выравнивание для содержимого атрибутом аїісп, вертикальное выравнива- 
ние содержимого — атрибутом уа1ісп и цвет фона — атрибутом расо1ог. Со всеми 
этими атрибутами мы уже встречались, не будем подробно описывать их действие, а про- 
сто перечислим с примерами использования (табл. 4.3). 
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Таблица 4.3. Атрибуты элемента <ТВ> 

Атрибут Описание Пример. 

а1190 1еғе — выравнивание данных в ячейках строки по левому а1іап="сепсег" 
краю (это значение по умолчанию). 


сепсег — выравнивание данных по центру (это значение по 
‘умолчанию для заголовков столбцов таблиц — тн) 


гіоће — выравнивание данных по правому краю 


ма1ідп сор — данные ячейки сдвигаются вверх. уа1ідп= "сор" 
тіда1е — данные ячейки центрируются вертикально (это 
значение по умолчанию). 
ЪЂоссоп — данные в ячейке сдвигаются вниз. 
Ъазе1 {пе — все ячейки вертикально выравниваются так, что- 
бы текст первых строк всех ячеек оказывался на базовой ли- 
нии, общей для всех ячеек в строке. Это ограничение не при- 
меняется к последующим текстовым строкам в этой ячейке. 
В общем случае значение равносильное значению сор 


Басо1ог Устанавливаег цвет фона для строки таблицы Басоток= "ынаке" 


Элементы ТО иТН — ячейки таблицы 


В НТМЬ внутри строк таблиц находятся ячейки. Они бывают двух типов: заголовки 
столбцов (создаются элементом ТН) и обычные ячейки (создаются элементом тр). Элемен- 
ты Тр и тн обязательно должны помещаться между открывающим и закрывающим тегами 
элемента ТК, которые в свою очередь помещаются между тегами < /ТАВЬЕ> и <ТАВЬЕ>. Та- 
ким образом, чтобы создать элементарную таблицу, состоящую всего из одной строки и од- 
ного столбца (олна ячейка), необхолимо записать такой кол: 
<ТАВІЕ> 
<ТЕ> 
<тр>Содержимое ячейки таблицы</ТО> 
</ТВ> 
</ТАВЬЕ> 

Элемент Тр от элемента ТН отличается лишь визуально в окне браузера. Солержимое 
элемента ТН выравнивается по центру и отображается жирным шрифтом, так как заго- 
ловки столбцов принято оформлять именно так. В остальном использование этих эле- 
ментов одинаково. Горизонтальное и вертикальное выравнивание, фоновый цвет зада- 
ются точно так же, как и для всей строки целиком. Указанные значения переопределяют 
заданные для всей строки: если для всей строки в качестве фона задан зеленый цвет, 
адля отдельной, например первой, ячейки задан желтый фон, то у всех остальных ячеек 
он останется зеленым, а у первой ячейки будет желтым. Аналогично переопределение 
имеет место и в отношении выравнивания. 

Таким образом, если у всех ячеек строки должны быть одинаковые параметры вырав- 
нивания и фон, то лучше их задать в открывающем теге <ТВ> для всех ячеек сразу. Если 
у всех строк таблицы эти параметры одинаковы, то задавайте их сразу для всей таблицы 
в открывающем теге <ТАВЬЕ>. 

Если у некоторого набора ячеек или строк таблицы эти параметры должны отличать- 
ся от остальных, то они переопределяются соответствующими атрибутами в тегах <Тв> 
для строк и втегах <Тр> или <ТН> для ячеек. 
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Сложнее дело обстоит с заданием ширины (№ійћ) и высоты (һеівћ) ячеек. Обе эти ве- 
личины могут быть заданы как в пикселях, так и в процентах от ширины экрана. 
Вернемся к специфичным для элементов Тр и ТН атрибутам, определяющим количе- 
ство строк, которое должна перекрывать ячейка, — ко\зрап (охват строк) и количество 
столбцов, которое должна перекрывать ячейка, — со1ѕрап (охват столбцов). Вспомните 
приведенный в начале этой главы пример таблицы с выплатами заработной платы. 
При создании таблиц с одинаковым числом ячеек в каждой строке используются значе- 
ния по умолчанию для этих атрибутов, равные единице (гоизрап="1" со1ѕрап="1"), 
т.е. ячейки не перекрывают ячеек из других строк и столбцов. 
Приведем пример таблицы с объединением ячеек в строках. Заголовок ТН объелиняет 
ячейки в двух строках (гомѕрап="2"): 
<ТАВІЕ а1ісп="сепсег" Богдег="1" се11раддіпс= 
<ТВ> 
<ТН комврапя"2">Страны</ТН> 
<Тр>Германия</Тр><Тр а1їісп="гідће">Берлин</тр> 
</тВ> 
<ТВ> 
<тр>Италия</Тр><Тр аісп="гісће">Рим</Тр> 
</тВ> 

</ТАВЬЕ> 


5" се11зрасіпо="0"> 


В этой таблице две строки и три столбца. Первая ячейка первой строки перекрывает 
собой первую ячейку еще одной строки (второй), так как задан атрибут коизрап="2". 
Код первой ячейки во второй строке при этом должен отсутствовать, иначе будет некор- 
ректен. В браузере таблица будет выглядеть так, как показано на рис. 4.6. 


Ве Е Мән Гамбии Тоби Нер 
+ 7392 Әбен уроюве Феде 9 о 
Абен |4] Слот аме тті 


| Германия Берлин | 
Страны | 
| Италия | Рим 


Рис. 4.6. Таблица с объединением ячеек в столбце 


И аналогичная таблица, но с объединением ячеек в одной строке: 

<ТАВІЕ а1ісп="сепбег" Бог4ег=”1” сеї1райаіпо="5* се11зрасіпо="0"> 

<ТВ> 

<ТН со1врап="2">Страны< /ТН> 

</тЕ> 

<тЕ> 

<тр>Германия</Тр><Тр а1ісп="хідіс*>Берлин</т0> 

</тв> 

<Тв> 
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<тр>Италия</Тр><Тр а119п=“езове“>Рим</Тр> 
<ТЕ> 
«ТАВЕЕ> 


В этой таблице уже три строки и лва столбца. Первая ячейка первой строки перекры- 
вает собой еще одну ячейку этой же строки, так как залан атрибут со1зрап="2". Код 
второй ячейки в первой при этом должен отсутствовать, иначе будет некорректен. 
В браузере такая таблица выглядит так, как показано на рис. 4.7. 


Ле вые 1 зы мысозой Таа я 


=101х) 
Бе ЕЯ Мен Ракой: Тож Нер |=] 


+ 


Рис. 4.7. Таблица с объединением ячеек в строке 


Обратите внимание, что сами таблицы выровнены по центру страницы, так как задан 
атрибут а119п="сереех" для элемента ТАВГЕ. Содержимое элемента ТН отцентрирова- 
но и выделено жирным шрифтом без дополнительных усилий с нашей стороны (по 
умолчанию.). Названия стран по умолчанию выровнены по левому краю, а названия сто- 
лиц — по правому, как и указано в атрибуте а1іап. 

Гораздо сложнее дело обстоит с заданием ширины и высоты ячеек таблицы. Как пом- 
ните, атрибут міаеєћ элемента ТАВГЕ задает ширину для всей таблицы. Пусть мы имеем 
дело с таблицей, ширина которой задана равной 600 пикселей. Такое значение выбрано. 
чтобы на минимальном разрешении 800х600 она помещалась на странице без дополни- 
тельной горизонтальной полосы прокрутки в окне браузера. Допустим. что у нашей таб- 
лицы три столбца. Тогда ширину всех трех столбцов можно задать один раз для ячеек 
первой строки, остальные ячейки их унаследуют. В НТМІ. две ячейки, находящиеся 
водном столбце, не могут иметь разную ширину. Задать ширину для наших столбцов 
можно также в пикселях, т.е. фиксированно, или в процентах, но уже от ширины всей 
таблицы. Например, требуется, чтобы первый столбец составлял 20% ширины таблицы, а 
остальные были одинаковы. Тогда получим такой код: 
<ТАВЬЕ Богдех="1" се115рас1па="0" эзаЕЬ="600"> 
<ТЕ><Тр міасћ="20%">Столбец 1</ТО><Тр міасћ="40%"> Столбец 2</ТО><ТЬ 


міасһ="40%"> Столбец 3</ТО></ТВ> 
</ТАВЬЕ> 


Ширину для третьего столбиа можно было не задавать — в этом случае она вычисля- 
ется автоматически исходя из того, что осталось. 

При задании значений в пикселях было бы логично предположить, что сумма шири- 
ны всех столбцов должна совпадать с шириной таблицы, но на практике, если задать 
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суммарную ширину столбцов болыше ширины всей таблицы, браузер использует задан- 
ные для столбцов величины, и вся таблица просто растянется. 

Если ширина столбцов не задана, то ширина всех столбцов будет одинаковой. Но ес- 
ли в одну из ячеек поместить, скажем, рисунок шириной 450 пикселей, то она автомати- 
чески растянется, чтобы вместить все содержимое. Надо заметить, что то же самое про- 
изойдет, даже если ширина ячейки будет указана явно. 

Высота ячейки задается атрибутом пез ан, но надо сказать, что задание высоты дело 
бесполезное, поскольку высота ячейки все равно полгоняется под содержимое. Проше 
говоря, этот атрибут работаст очень странно или вообще не работает. 

На тему разных тонкостей и “глюков” при задании ширины и высоты можно рассуж- 
дать долго, но проблем это не решит. Задавая ширину и высоту таблицы или ее ячеек, вы 
определяете лишь рекомендуемые значения, так как они все равно будут адаптироваться 
к своему содержимому. 

Как обычно, подытожим все сказанное выше и приведем атрибуты элементов тр и тн 
водной обшей таблице (табл. 4.4). 


Таблица 4.4. Атрибуты элементов <ТН> и <ТО> 
Атрибут Описание 


ап Устанавливает горизонтальное выравнивание для содержимого 
ячеек; допустимые значения: 1еғ (по умолчанию для тр), 
сепгег (по умолчанию для тн), гісъо. 
(См. элемент тк) 


ма1ісп Устанавливает вертикальное выравнивание для содержимого Уа1ісп= "сор" 
ячеек; допустимые значения: Бор, ті да1е, Босго, Базе] пе. 
(См. элемент тк) 


Ъасо1ок Устанавливает цвет фона для ячейки таблицы Ъасо1іог= "ућібе" 


гомврап Определяетчисло строк, перекрываемое текущей ячейкой. По гомерап="3" 
умолчанию используется значение один ("1"). Значение нуль 
("0") означает, что ячейка перекрывает все строки от текущей 
до последней строки таблицы 


соїзрап Определяет число столбцов, перекрываемое текущей ячейкой. со1зрап="2" 
По умолчанию используется значение один ("1 "). Значение 
нуль ("0") означает, что ячейка перекрывает все столбцы от те- 
кущего до последнего столбца таблицы 


міаєһ, Устанавливает рекомендуемую ширину ячейки в пикселяхили міаєһ= "20%" 
процентах 

везаве Устанавливает рекомендуемую высоту ячейки в пикселях или Һеісһс="40%" 
процентах 


Создаем сложную табличную структуру 


Очень часто, чтобы воплотить в жизнь дизайнерскую илею, требуется создавать таб- 
лицы очень сложной структуры, где большое количество ячеек перекрывает соседние. 
Иногда эти хитросплетения очень трудноуловимы. Давайте рассмотрим пример — мини- 
прайс-лист нашей строительной фирмы “Дом” на изготовление оконных рам и дверей, 
показанный в табл. 4.5. 
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Таблица 4.5. Прайс-лист на изготовление оконных рам и дверей 


Вид изделия Стоимость (у.е. за м’) 
Дерево Пластик 
дуб береза липа 
Оконные рамы 50 40 30 45 
Балконные двери 53 43 33 48 
Межкомнатные двери 52 42 32 47 
Входные двери 100 90 80 


Создадим новый НТМІ -документ, куда и поместим наш прайс-лист. Как и раньше, 
можно взять за основу любой другой документ и изменить в нем тело документа. Назовем 
егоргісе.Һот1 и поместим в ту же папку, где хранятся все остальные документы. 

Попробуем разобраться, сколько строк и столбцов в нашей таблице. Если абстрагиро- 
ваться от перекрывающих ячеек, то в таблице можно выделить 7 строк и 5 столбцов. Сама 
таблица отцентрирована на странице, и у нее есть название. Так как перекрытие ячеек 
задается только в элементах, создающих ячейки, сейчас мы уже можем описать каркас 
для будущей таблицы: 
<ТАВГЕ а149п="сепеех" Богдеү=*1" се11зрасіпс="0" мійс="70%*'> 
<САРТТОМ><В> Изготовление оконных рам и дверей</В></САРТТОМ> 
<ТВ> Код ячеек 1 строки</ТЕ> 
<ТВ> Код ячеек 2 строки </ТВ> 
<ТВ> Код ячеек 3 строки </ТВ> 
<ТЕ> Код ячеек 4 строки </ТВ> 
<ТЕ> Код ячеек 5 строки </ТВ> 
<ТВ> Код ячеек 6 строки </ТВ> 
<ТВ> Код ячеек 7 строки </ТВ> 
</ТАВЬЕ> 

Теперь будем разбираться с таблицей построчно. Сначала идет шапка таблицы, для 
нее будем использовать элементы Тн. Первая ячейка первой строки содержит фразу “Вил 
изделия” и перекрывает три ячейки в первом столбце — распространяется на три строч- 
ки (сомѕрап="3 "). Ее ширину примерно задавать не будем, пусть регулируется в зави- 
симости от того текста, который мы в нее поместим. Вторая ячейка перекрывает 4 ячейки 
в одной строке — распространяется на 4 столбца (со1зрап="4") и содержит фразу 
“Стоимость (у.е. за м’)”. Здесь придется вспомнить, как создаются верхние индексы. 
Итак, кол первой строки будет таким: 
<ТВ> 
<ТН коиврап ="3"> Виды изделий</ТН> 
*4*> Стоимость (у. е. за м <50Р>2</5ИР>) </ТН> 


Первая ячейка второй строки уже занята, ее перекрывает ячейка “Вид изделия”, ее мы 
пропускаем. Далее идет ячейка со словом “Дерево”, перекрывающая три столбца 
(со1зрап="3"). Ячейка со словом “Пластик” перекрывает один столбец и две строки 
(хоизрап="2"), поэтому со1зрап="1" — значение по умолчанию записывать не бу- 
дем, укажем только комзрап="2". Получим код второй строки таблицы: 
<тЕ> 
<ТН со1врап="3">Дерево</ТН> 


<ТН коизрап="2">Пластик</ТН> 
</тв> 
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Ну и последняя строка заголовка таблицы содержит три ячейки с названиями пород 
дерева. Первая ячейка опять пропущена, ее занимает “Вид изделия”, последняя занята 
словом “Пластик”. Из 5 ячеек остаются 3 простые ячейки, не перекрывающие никаких 
других. Код третьей строки такой: 
<тв> 
<ТН>дуб</ТН> 
<ТН>береза</тн> 
<ТН>липа</ТН> 
</ТВ> 

На этом шапка таблицы закончена, далее для формирования ячеек будем использо- 
вать элемент Тр. Обратите внимание, что при использовании элемента ТН содержимое 
ячеек было отцентрировано и выделено жирным шрифтом. Следующие строки имеют 
такую структуру: первая ячейка выровнена по левому краю (это значение по умолчанию), 
в ней хранится название изделия. Содержимое остальных ячеек отцентрировано 
(выравнивание придется задать явно), это цены на изделия в зависимости от материала. 

У нас есть два варианта. В первом не указываем для первой ячейки выравнивание, ус- 
танавливается значение по умолчанию, т.е. по левому краю. Для остальных 4 ячеек при- 
дется указать выравнивание явно а119п=сепеег. Второй вариант — задать выравнива- 
ние а11дп=сепеек для всей строки и изменить его на аї1ісп=1еЁє, только для первой 
ячейки. Второй способ, на мой взгляд, проще. Во-первых, потому что меньше надо пи- 
сать, во-вторых, это дает нам дополнительные преимушества, так как уменьшает код, а 
следовательно, и размер файла. Им и воспользуемся. Приведу пример только для первой 
строки, остальные по аналогии заполните сами. 
<ТВ аїісп="сепбег"> 
<ТР а149п="1еЕЕ">Оконные рамы</Тр> 
<Тр>50</тр> 
<тр>40</тр> 
<т0>30</тр> 
<тр>45</Тр> 
</тв> 

Обратим внимание на последнюю строку. Если записать ее код таким образом: 


«ТА а1ідп=*сепбег"> 
<Тр аіідп="Іеѓс">Входные двери</Тр> 
<10>100</тр> 

<тр>90</тр> 

<т0>80</70> 

«тр></тр> 

</ТВ> 


т.е. если оставить последнюю ячейку пустой. то границы этой ячейки не отобразятся. 
Чтобы это исправить, поместите код специального символа “неразрывный пробел” меж- 
ду тегами <тр> и </тр>. Получим такую запись: <То>&пЪзр ; </ТО>. Тогда граница во- 
круг ячейки появится. Окончательный вид таблицы показан на рис. 4.8. 
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"Аве [8] С\аи\Росе т 


Изготовление оконных рам и дверей 


| Стоимость (у. е.зам 2) 


Виды изделий. | дерево | 
пластик | 
| дуб береза | липа | 
Н {Оконные рамы 50] 40 | 30:1 45 | 
Балконные дер  |53| 43 | 33| 4 | 
Межкомнатные двери — |5| 4 |2 | 4 | 

Входные двери 1100. 90 | 00 


Рис. 4.8. Пример таблицы со сложной структурой 


Группировка строк таблицы 


В языке НТМЕ существуют элементы, позволяющие группировать строки таблицы, 
формирующие шапку, тело и окончание таблицы. Это элементы: 


® ТНЕАО — группа строк заголовка таблицы; 
• творү — группа строк основной части таблицы; 
• ТРООТ — группа строк нижней части таблицы (нижний заголовок). 


НТМЕ-код таблицы с использованием таких элементов будет выглядеть так: 


<ТАВІЕ> 
<ТНЕАО> 
«код строк шапки таблицы. 
</ТНЕАО> 
</ТЕООТ> 
„код строк нижней части таблицы. 
<ТЕООТ> 
</творү> 
код строк тела таблицы. 
<ТВОрү> 

</ТАВЬЕ> 

Предназначены они для упрощения работы с таблицей. Согласно спецификации 
НТМЕ, элемент ТРООТ должен располагаться до элемента Твору в определении ТАВЬЕ, 
чтобы браузеры пользователей могли генерировать нижний заголовок до получения всех 
(возможно, многочисленных) строк ланных. Кроме этого, при прокрутке такой таблицы 
на экране при ‘надобности могуг оставаться. верхний и нижний заголовки, а прокручи- 
ваться может только содержимое. Аналогично при распечатке таблицы будет удобнее, ес- 
ли на каждом листе будет се заголовок с подписями значений столбцов. На практике ви- 
деть применение этих свойств мне не приходилось, а браузер Мебсаре вообще не под- 
держивает указанные теги, 

Если требуется использовать группировку строк, то нужно знать, что в любой из групп 
должно быть как минимум по одной строке и, соответственно, одному элементу ТВ. Если 
таблица не содержит групп ТНЕАР и ТЕООТ, то элемент ТВОБУ можно также опустить. За- 
крывающие теги для этих элементов не являются обязательными. 
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Рассмотрим пример таблицы, представляющей расходы некой компании на канцто- 
вары (табл. 4.6). 


Таблица 4.6. Расходы на канцтовары 


1 квартал И квартал Ш квартал 
Бумага для принтера. 2000 руб. 2560 руб. 1980 руб. 
Бумага для копира 980 руб 1100 руб. 1120руб. 
Бумага для факса 90 руб. 110руб. 80руб. 
Итого: 3070 руб. 3770 руб. 3180 руб. 


Строк в такой таблице может быть довольно много, и чтобы пользователь мог сразу 
увидеть итоги, можно воспользоваться группировкой строк. Например, запишем код 
таблицы следующим образом: 


<ТАВЬЕ Богаек="1" се11раддіпо="5" се115расіг 
<ТНЕАО> 
<ТК> 
<ТН>&пЬвр; </ТН> 
<ТН>Т квартал</ТН> 
<ТН>ІІ квартал</ТН> 
<ТН>ІІІ квартал</Тн> 
</ТВ> 
</ТНЕАО> 
<ТРООТ> 
<ТВ> 
<ТН а]ісп="гісће">Итого:</ТН> // аІідп="гідће" задан, чтобы изменить 
выравнивание по умолчанию для ТН 
<ТН>3070 руб.</ТН> 
<ТН>3770 руб.</ТН> 
<ТН>3180 руб.</ТН> 
</ТЕ> 
</ТРООТ> 
<творү> 
<тв> 
<ТР>Бумага для принтера</тО> 
<Тр>2 000 руб.</Тр> 
<10>2560 руб.</Тр> 
<тр>1980 руб.</Тр> 
</Тв> 
<ТЕ> 
<Тр>Бумага для копира</Тр> 
<тр>980 руб.</Тр> 
<ТР>1100 руб.</Т0> 
<70>1120 руб.</тр> 
</тв> 
<тЕ> 
<Тр>Бумага для факса</Тр> 
<Т0>90 руб.</Тр> 
<70>110 руб.</Тр> 
<Тр>80 руб. </Тр></ТА> 
</творү> 
</ТАВІЕ> 


Таблица получилась почти такой, как нам нужно. Нелостает лишь выравнивания по 
пентру для столбцов в теле таблицы. содержащих цифры. Это мы исправим позже, а пока 
обратите внимание на то, что секция ТЕООТ идет перед ТВОрү и, несмотря на это, распо- 
лагается в конце таблицы. Именно этого мы и хотели добиться. В процессе загрузки 
браузер прочитает ее раньше, чем все остальные строки тела таблицы. 
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Группировка столбцов таблицы 


Существуют еще элементы СОГСВООР и СОР, позволяющие группировать столбцы таб- 
лицы. Таблица может содержать одну группу столбцов СОГСВОЧР, когда элемент не задан 
явным образом, или любое число явных групп столбцов, каждая из которых определяется 
одним экземпляром элемента СОГСВООР. Элемент СОБ позволяет создавать подгруппы и 
использовать одни и те же атрибуты в различных столбцах. Атрибут зрап элементов 
СОТ-СВОЧР и СОГ. задает число столбцов, использующих атрибуты этого элемента. 

К примеру, необходимо создать таблицу, состоящую из 5 столбцов одинаковой ши- 
рины в 120 пикселей. Тогда можно написать такой НТМ\--код: 
<ТАВЬЕ> > 
<СОБСВООР> 

<СОЬ мідећ="*120"> 

<С01, міаєһ=*120"> 

<соь 

<сог 

<СОЬ міасћ="120"> 
</СОГЗВОЙР> 


код строк таблицы с содержимым столбцов -— 
</ТАВЬЕ> 


А можно воспользоваться атрибутом эрап, и код сократится значительно: 
<ТАВЬЕ> 
<СОБСВОПР врап="5" мідбћ="120"> 
</СОШСЕО0Р> 

код строк таблицы с содержимым столбцов -. 
</ТАВЬЕ> 

Например, для таблицы, в которой мы использовали группировку строк, можно вос- 
пользоваться дополнительно и группировкой столбцов, чтобы задать для них ширину. 
Первый столбец должен быть шире остальных, так как содержит наименования канцто- 
варов, остальные могут быть уже, так как содержат только цифры стоимости этих канц- 
товаров. Таким образом, у нас будет две группы столбцов: первая — пошире и вторая 
(для трех одинаковых столбцов) — поуже. Кроме этого, для второй группы нужно задать 
выравнивание по центру — делается это с помощью задания атрибута а1ісп="сепсег". 
<СОШСВООР> 
<СОГ, міаћ="170"> 
<СОГ ѕрап="3" міасћ="100" а1ідп="сепсег"> 
</СОЦСВО0Р> 

Надо сделать лишь одно замечание, что браузеры №еїѕсаре и МохШа не воспримут ат- 
рибут а1ісп="сепсег", и выравнивание ячеек останется по левому краю, но это не та- 
кой сушественный недостаток, и его можно исправить, указав для них выравнивания яв- 
но в каждой ячейке, как мы делали это ранее. Значения, заданные в ячейке непосредст- 
венно, переопределяют значения, заданные для группы столбцов. 

Надо заметить, что использование групп столбцов может значительно сократить 
НТМЕ-код и упростить его редактирование. Например, чтобы исправить ширину трех 
столбцов, достаточно исправить значение в одном месте — в описании группы столбцов. 
Аналогично и с выравниванием, здесь мы его задали всего в одном месте. 

Но не забывайте, что такие структуры отображаются не всеми браузерами одинаково, 
поэтому если хотите добиться универсальности, пользуйтесь тем способом, который мы 
описывали при создании таблицы сложной структуры, или комбинируйте оба способа. 
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Некоторые особенности при работе с таблицами 


И в завершение этого раздела приведем некоторые особенности, которые скрывают в 
себе таблицы. Этот список далеко не исчерпывающий. 


• При использовании таблиц на \\е-странице нужно учитывать то, что содержимое 
таблицы не выводится на экран браузера до тех пор, пока не будет полностью по- 
лучен код всей таблицы. Если вы используете таблицы с большим числом строк, 
то, возможно, имеет смысл разбить их на менее громоздкие, чтобы пользователи 
могли еще в процессе загрузки страницы увидеть часть содержимого страницы. 


~ Если параметр Һеісһе указать равным 100%, то старые версии И\егпе! Ехріогег 


будут создавать таблицу высотой, чуть превышающей высоту окна браузера. Что- 
бы этого избежать, можно пожертвовать рамкой таблицы, указав Бокаег="0". 


• Старые версии М№еіѕсаре работают некорректно, если ширина и высота таблицы 
равны 100%. В этом случае вокруг таблицы остается свободное пространство. 


• Атрибут а1ісп не работает в старых версиях браузера Имегпе! Ехріогег. Чтобы 
осуществить желаемое выравнивание таблицы, нужно поместить ее между тегами 
элемента рту. 


• Границы ячейки отображаются только в том случае, когда она имеет некое содер- 
жание. Чтобы получить пустую ячейку с границами, достаточно поместить в нее 
специальный символ &пЪзр; (неразрывный пробел) или маленькую прозрачную 
Е картинку. 

• Один из наиболее распространенных приемов У/еБ-дизайнера — “таблица в таб- 
лице”. Для этого достаточно расположить одну таблицу внутри ячейки другой. Та- 
ким образом можно создавать даже очень сложные вложенные “каркасы” дизайна 
страницы. 


• Всегда строго соблюдайте вложенность элементов при работе с таблицами. Элементы 
тр и ТН всегла должны находиться внутри элемента ТВ, элементы ТВ и САРТТОМ внут- 
ри элемента ТАВЬЕ. Следите, чтобы присутствовали и открывающие и закрывающие 
теги элементов, иначе прелугалать, каким образом браузер отобразит ваш код, будет 
‘невозможно. Если браузер не может корректно обработать код таблицы, то располагает 
элементы случайным и непредсказуемым образом. 


Как изменить цвет границы таблицы 


Как мы уже говорили ранее, средствами НТМЕ невозможно изменить цвет границ 
утаблицы, но иногда это очень хочется сделать. Тогда можно воспользоваться одной 
хитростью. 

Создается дополнительная таблица с единственной ячейкой и таким цветом фона, ка- 
кой нужно задать для границ основной таблицы, например красным. Внутри этой таблицы 
помещается основная таблица, для которой и требуется создать границы определенного 
цвета. Для нее устанавливается расстояние между ячейками, равное требуемой толщине 
границ, и задается другой цвет фона, например белый. Важно. чтобы размеры обеих таблиц 
совпадали. Тогда получится, что на красный прямоугольник мы наложим таблицу с белым 
фоном, а через промежутки между ячейками будет просвечивать красный фон дополни- 
тельной таблицы. Создастся впечатление, что это границы нашей таблицы. 

Рассмотрим пример на основе кода таблицы, которую мы уже использовали ранее, 
когда изучали объединения строк и ячеек таблицы (см. рис. 4.6). 
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Явно границу для таблицы мы теперь указывать не будем. Код основной таблицы в этом 
случае будет следующим: 


<ТАВІЕ Басо1ог="иваЕе" Богдег-"0" се11радіпо= 
міаєњ=*200"> 
<ТЕ> 
<ТН гонврап="2">Страны</Тн> 
<ТБ>Германия</ТО><ТР а1ісп= "кісћ*>Берлин</Тр> 
</тв> 
<ТВ> 
<ТБ>Италия</ТО><ТЬ аїісп="гідће*>Рим</тр> 
</тв> 
</ТАВЬЕ> 


Эту таблицу необходимо поместить внутрь таблицы с красным фоном: 
<ТАВІЕ Ьдсо1ог="гей" Богаег="0” се11раддіпа=*0" се115расіпд=*0" міаєћ=*200*> 
<ТВ> 
<тр> 
-. код основной таблицы .. 
</тТо> 
</тв> 
</ТАВЬЕ> 


* се11=расіпо="1" 


После этого, казалось бы, все должно получиться, но не тут-то было. Браузер закрасит бе- 
лым цветом не только содержимое ячеек основной таблицы, но и пространство между ними. 
Желаемого эффекта не будет, но ситуацию все еще можно исправить, указав значения атрибу- 
та расої1ог="ућібе" не в элементе ТАВГЕ, а для каждой строки таблицы отдельно. Это не- 
‘сколько удлинит код, но зато получим нужный эффект. Итак, приведем полный код: 
<ТАВІЕ Ьдсо1ог="гей" Богдег="0" се11райдіпо="0" се11врас1па="0" міаеһ="200"> 

<ТЕ> 


0" се11райдіпо=*0° се11зрасіпс="3" міасћ="200" > 
<ТВ Басоїог= "ућібе"> 

<ТН коиврап="2">Страны</ТН> 
<тр>Германия</Тр> 

<ТЬ а1ісп="гісће">Берлин</Тр> 
</тв> 

<ТВ Ыссо1ог="ућібе"> 
<ТО>Италия</ТО> 

<ТЬ аїісп="гісће">Рим</Тр> 
</тв> 

</ТАВЬЕ> 

</тр> 

</тв> 
</ТАВЬЕ> 


Результат представлен на рис. 4.9. Теперь, залав для фоновой таблицы нужный цвет, 
вы измените цвет границ основной таблицы. Изменяя значения атрибута се115расіпо 
для основной таблицы, можно регулировать толщину границы. 


Термания Берлин 


Страны алия Рим 


Рис. 4.9. Таблица с рамками 
ячеек красного цвета 


И еще один совет, который будет полезен при работе с таблицами, количество строк и 
‘столбцов у которых довольно велико. Часто используют такой прием: не включают ото- 
бражение границ между строками, вместо этого устанавливают для соседних строк раз- 
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ные цвета для фона. Это позволяет пользователю легко следить за содержимым и визу- 
ально делает таблицу более “легкой” и не загроможденной. Цвета обычно чередуют для 
четных и нечетных строчек, подбирая их таким образом. чтобы они были довольно кон- 
трастны и вто же время приналлежали одной цветовой гамме. Часто используют оттенки 
одного цвета, как показано в табл. 4.7. 


Таблица 4.7. Пример таблицы с чередованием цвета строк 


1квартал И квартал Ш квартал. 
Бумага для принтера. 2000 руб. 2560 руб. 1980 руб. 
Бумага для копира. 980 руб. 1100 руб. 1120 руб. 
Бумага для факса 90 руб. 110 руб. 80 руб. 
Итого: 3070 руб. 3770 руб. 3180 руб. 


‘Соответственно, нужно подобрать два цвета для фона и чередовать их таким образом: 


со1ог1"> код столбцов -</ТВ> 
со10ог2"> „код столбцов -</ТЕ> 
со1ог1"> код столбцов ..</ТЕ> 
со10г2"> „.-код столбцов „.</ТЕ> 


</ТАВЬЕ> 


Чтобы упростить задачу, можно задать фон для всей таблицы и переопределить его 
для отдельных строк: 


<ТАВЬЕ Ьссо1ог=*со1оғ1"> 
<ТЕ> „код столбцов -</ТВ> 
<ТВ Басо1ок="со1ок2"> „код столбцов -</ТВ> 
<ТВ> „код столбцов „</ТВ> 
<ТВ Басо1ог="со1ог2"> „код столбцов .</ТВ> 
</ТАВЬЕ> 
Такой прием позволит немного сократить НТМ!-код, да и в случае чего будет проще 
редактировать, например, если вы решите изменить цвета. 


Алгоритмы обработки таблиц 


Как уже не раз говорилось выше, таблицы, содержащие много информации и большое 
количество строк, довольно долго выводятся на экран. Во-первых, потому что содержимое 
таблицы нужно скачать, а, во-вторых, браузеру требуется время, чтобы просчитать размеры 
таблицы и ячеек. В спецификации НТМІ. определено два алгоритма отработки таблиц: 
фиксированный и автоматический. Фиксированный алгоритм обработки подразумевает, что 
количество столбцов таблицы фиксированно и заранее известно. Его можно задать, напри- 
мер, при помощи атрибута со15 элемента ТАВІЕ. Атрибут со1з определяет число столб- 
цов, и тогда таблица может обрабатываться с использованием фиксированного алгоритма, 
в противном случае будет использоваться алгоритм автоматической обработки таблиц. 

Алгоритм автоматической обработки заключается в следующем: 


® если атрибут міаєћ в элементе ТАВІЕ не указан, то визуальные браузеры пользо- 
вателей должны использовать значение по умолчанию, равное 100%; 


® браузерам пользователей, в случаях когда содержимое ячейки не помещается 
в нее, рекомендуется расширять ширину ячеек таблицы до тех пор, пока не помес- 
тится все содержимое. Браузеры не должны менять ширину ячеек без веской на то 
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причины. Браузеры пользователей могут разбивать предложения на строки 
(переносить слова на новую строку) во избежание появления горизонтальной по- 
лосы прокрутки; 

• заголовки таблиц, залаваемые элементом САРТТОМ, считаются подобными ячей- 
кам. Каждый заголовок является ячейкой, перекрывающей все столбцы таблицы, 
если он располагается внизу или вверху таблицы, и захватывающей все строки 
таблицы, если он располагается слева или справа. 


Алгоритм фиксированной обработки таблиц 


Этот алгоритм применим, когда число столбцов заранее задано и известно в тот мо- 
мент, когда начинается обработка таблицы. Ширина столбцов по умолчанию считается 
одинаковой, но создатели документов, как вы знаете, могут задавать ее либо путем указа- 
ния абсолютной ширины в пикселях, либо указывая относительную ширину в процентах 
или пропорционально другим столбцам с помощью элементов СОГСКОТР или СОІ.. 

Шириной таблицы по умолчанию считается все пространство между левым и правым 
полями страницы, но ее также можно переопределить с помощью атрибута міасћ эле- 
мента ТАВЬЕ или определить суммированием абсолютной ширины столбцов. 

При использовании как абсолютного, так и относительного способа задания ширины 
столбцов первым шагом алгоритма является распределение пространства под столбцы 
с фиксированной шириной. После этого оставшееся пространство делится между столб- 
цами с относительной шириной. Описанного выше алгоритма недостаточно в тех случа- 
ях, когда код таблицы написан с ошибками. Например, число столбцов, определяемое 
атрибутом со15, может не совпадать с числом столбцов, определяемым элементами СОГ. 
В свою очерель это число может не соответствовать числу столбцов, определяемому ко- 
дом самих ячеек таблицы. Затем проблемы могут возникнуть, если столбцы слишком уз- 
кие и содержимое в них не помещается или ширина таблицы, указанная в элементе 
ТАВЬЕ, или сумма ширины всех столбцов в элементе сог, не совпадают. Все это может 
привести к переполнению ячейки таблицы и их неправильному отображению. Браузерам 
пользователей рекомендуется корректно выходить из таких ситуаций, например путем 
автоматического переноса или разбивки слов, если места переноса неизвестны. Чаще 
всего используется именно перенос по словам. Тогда слово переносится на новую строку 
целиком, в том случае, если не помещается на строке полностью. 

В случае, если расширение ячейки вызывает неделимый элемент, например рисунок, 
тогда браузер пользователя может отрегулировать ширины столбцов и по-новому пред- 
ставить таблицу. В худшем случае, если изменение ширины столбца или введение полосы 
прокрутки невозможны, тогда браузеру разрешается обрезать содержимое. Но, если со- 
держимое ячейки обрезается или разбивается, то пользователь должен быть об этом пре- 
дупрежден. 

Как вы помните, распространенные в настоящее время браузеры не обрезают содер- 
жимого ячейки, а изменяют ширину ячейки до нужного размера. 


Алгоритм автоматической обработки таблиц 


Этот алгоритм используется, когда атрибут СОГ.5 в начальном теге таблицы отсутству- 
ет, т.е. количество столбцов таблицы заранее не известно. В этом случае браузер пользо- 
вателя должен использовать следующий алгоритм автоматической обработки таблиц. 
В нем используется два прохода по структуре и данным таблицы, а также линейное мас- 
штабирование размера таблицы. 
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Первый проход осуществляется при отключенном переносе по словам, и браузер оп- 
ределяет минимальную и максимальную ширину каждой ячейки. 

Максимальная ширина определяется самой широкой строкой. Поскольку разбивка 
строк отключена, абзацы текста представляются как длинные строки, если только они не 
разбиты принудительно с помощью элементов ВЕ. Минимальная ширина определяется 
самым широким элементом текста (самым длинным словом, изображением и т.д.) с уче- 
том начальных отступов, маркеров списков и т.д. Другими словами, необходимо опреде- 
лить минимальную ширину ячейки, в которую можно поместить это содержимое без 
принудительного увеличения ее ширины. 

Этот процесс также применяется к вложенным в ячейки таблицам. Минимальная 
и максимальная ширина ячеек во вложенных таблицах используется для определения 
минимальной и максимальной ширины этих таблиц и, следовательно, для ячеек внешней 
таблицы. Алгоритм можно применить к неограниченному количеству вложенных таблиц, 
но сути это не изменит. 

Минимальная и максимальная ширина ячейки используются для определения соответ- 
ствующей минимальной и максимальной ширины столбцов. В свою очередь они использу- 
ются для нахождения минимальной и максимальной ширины таблицы. Обратите внима- 
ние, что ячейки могут содержать вложенные таблицы, но это не усложняет код. Следующим 
шагом алгоритма является назначение ширины столбцов в соответствии с оставшимся сво- 
бодным пространством (т.е. пространством между левым и правым полями). 

Для определения ширины ячеек, занимающих несколько столбцов, есть несколько 
вариантов. Простой вариант состоит в распределении минимальной и максимальной 
ширины равномерно между всеми столбцами, которые перекрывает эта ячейка. Чуть бо- 
лее сложный вариант — учитывать минимальную и максимальную ширину ячеек, не 
объединяющих несколько строк или столбцов. Их ширина используется для определения 
того, как распределяется ширина ячеек, перекрывающих несколько строк или столбцов. 
Наилучшие результаты в общем случае, т.е. для разного рода таблиц, дает комбинирова- 
ние этих двух вариантов. 

Границы таблицы и расстояния между ячейками должны включаться в определенную 
по алгоритму ширину столбцов. Возможны три случая. 


1. Если минимальная ширина таблицы равна пространству, доступному для табли- 
цы, или превышает его, то в этом случае таблице присваивается минимально воз- 
можная ширина и пользователю предоставляется возможность горизонтальной 
прокрутки. 

2. Если максимальная ширина таблицы умещается в доступное ей пространство, то 
для таблицы устанавливается максимальная ширина столбцов. 


3. Если максимальная ширина таблицы превышает лостулное пространство, а мини- 
мальная нет, тогда ширина столбцов с большей разницей между минимальной и мак- 
симальной шириной будет пропорционально больше ширины колонок с меньшей раз- 
ницей этих же величин. 


Этот шаг повторяется и для вложенных таблиц с использованием минимальной 
и максимальной ширины, полученных для всех таких таблиц в первом проходе. В данном 
случае ширина ячейки внешней таблицы играет роль размера текущего окна в приведен- 
ном выше алгоритме. Этот процесс повторяется рекурсивно для всех вложенных таблиц. 
На первом проходе устанавливается ширина для самой верхней таблицы, затем для вло- 
женных в нее таблиц, 
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Если ширина таблицы указана с использованием атрибута міаећ, браузер пользова- 
теля пытается установить соответствующую ширину столбцов. Значение атрибута мзаЕВ 
не является неизменным, если в столбцах имеются неделимые элементы. 

Если относительная ширина определяется с помощью элемента СОІ,, алгоритм изме- 
няется, и ширина столбцов увеличивается, по сравнению с минимальной, для соответст- 
вия относительной ширине, указанной в элементе СОІ. Элементы СОІ, учитываются 
только как подсказки, поэтому ширина столбцов не может устанавливаться меньше ми- 
нимальной. Аналогично ширина столбцов не должна быть такой, чтобы таблица растяги- 
валась за пределы окна. Если элемент СОТ, задает относительную ширину, равную нулю, 
‘столбец всегда должен иметь минимальную ширину. 

Возможно, знакомство с этими алгоритмами поможет вам немного лучше понять ал- 
горитмы обработки таблиц. Надеюсь, что это действительно поможет, а не запутает еще 
больше. 

Алгоритм обработки для таблицы задается атрибутом 1ауоцЕ элемента ТАВІЕ. Фик- 
сированному алгоритму обработки соответствует описание 1ауоцЕ=" #іхед", для авто- 
матической обработки (значение по умолчанию) задается значение аџбо. 
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Глава 5 


Формы 


В этой главе... 


> Добавляем интерактивность 
> Перевод фокуса ввода на элемент 
> Сценарии 


Добавляем интерактивность 


В НТМІ, начиная с версии 2.0, появилась возможность создавать на странице такие 
элементы, которые предоставляют пользователям возможность вводить информацию. 
Такие элементы называются элементами форм. Формы позволяют добавлять на страницу 
поля для ввода текста, создавать списки для выбора и размещать на МеЬ-страницах 
кнопки, что позволило создать в МУҰ поисковые машины и обращаться к их базам дан- 
ных с запросами. 

Следует отметить, что формы представляют собой только инструмент ввода инфор- 
мации. Сами по себе они могут лишь отправить полученную информацию в простом тек- 
стовом сообщении на заданный адрес электронной почты. Для реализации более слож- 
ного дополнительно требуется наличие специальных программ-обработчиков (сценариев, 
или скриптов), функционирующих на УеБ-сервере. Именно они обрабатывают получен- 
ные данные, выполняют с ними необходимые лействия, формируют запросы и возвра- 
щают пользователю результаты своей работы. Написание программ обработки не входит 
в тематику этой книги, так как создаются они при помощи языков программирования, 
а не языка разметки, которым является НТМІ. 

Для создания форм используются такие НТМІ.- 


лементы: 


® ЕОВМ — для создания формы внутри НТМ |Е-локумента; 

• ТМРОТ — для добавления элемента ввода; 

• ОРТТОМ — для создания элементов внутри списков ЅЕГЕСТ; 

• ЗЕБЕСТ — для создания списков выбора из ограниченного числа элементов; 
* ТЕХАБЕА — создает многострочное текстовое поле. 


Каждое поле формы, созданное при помоши элемента ІМРОТ, ТЕХТАВЕА или ОРТІОМ, 
обязательно должно содержать атрибут папе, задающий для него имя. По этому имени бу- 
дут идентифицироваться введенные в них пользователем значения при их обработке про- 
траммой-сценарием. 

Кратко опишем те элементы, которые может включать в себя форма, — в общем случае 
будем называть их управляющими элементами. С каждым из них вы встречались при работе 
со стандартным графическим интерфейсом операционной системы, например Міпӣомѕ. 

"Текстовые поля. Поля для ввода и (или) релактирования текстовой информации. 
Можно создать поле для ввода одной строки или многострочное текстовое поле. 


Переключатели (Кадю Випопѕ). Позволяют выбрать один из нескольких предложен- 
ных вариантов (рис. 5.1). 

Флажки (СһесКбохеѕ). Позволяют выбрать любой набор значений из числа представ- 
ленных (рис. 5.2). 


Т эпасе 
ТГ асарт 
вы Се Св Гс 
Рис. 5.1. Переключатели Рис. 5.2. Флажки 


Раскрывающиеся списки и списки ввода или выбора (Мепи). Первый позволяет выбрать 
элемент из множества значений, представленного в виде списка (рис. 5.3). Второй позво- 
ляет не только выбрать значение в имеющемся списке, но и ввести новое (рис. 5.4). На- 
пример, это могут быть списки, позволяющие выбрать размер шрифта. 


Рис. 5.3. Раскрывающийся Рис. 5.4. Список для 
список ввода или выбора 


Выбор файла (Ее ЅеІесг). Поле, позволяющее выбрать и передать на МеБ-сервер не- 
который файл. Оно представляет для просмотра и выбора файла дерево папок локаль- 
ного компьютера. 

Кнопки (Вокќопѕ). С помощью кнопок формам может быть добавлена новая функцио- 
нальность. По щелчку на кнопке выполняется заданное действие: очишаются поля фор- 
мы или ее содержимое отправляется на обработку. 


Элемент ҒРОВМ 


Форма на МеБ-странице создается при помощи элемента ЕОЕМ. Открывающий и за- 
крывающий теги этого элемента отделяют содержимое формы от других элементов стра- 
ницы, а его атрибуты задают параметры для всей формы. 

Атрибут пате задает имя формы. Его можно опустить, если на странице всего одна 
форма. Если их несколько, то необходимо задать имя для всех форм, чтобы программа 
обработки данных из форм могла установить, от какой именно формы получены данные. 

Чтобы определить, какому сценарию передать данные из формы, используется атрибут 
асЕ1 оп. Его значением является ЦВ. той программы-сценария на сервере, которой пред- 
стоит обрабатывать данные. В качестве значения этого параметра также можно указать ад- 
рес электронной почты, по которому будут отправлены данные, введенные в форму. 

Метод, которым должны передаваться данные программе, указанной в атрибуте ассіоп, 
определяется атрибутом теєћоа. Метолов есть два: дес и ро5Е. Метод деб лучше использо- 
вать, когда передаваемые сценарию ланные не требуют дополнительной обработки — напри- 
мер, когда вы просто формируете запрос к базе данных. Сценарий выполняет требуемый за- 
прос и результаты возвращает вам. При использовании метода сдеє набор данных формы до- 
бавляется к СВЕ страницы, на которой расположена форма, и этот новый КІ. отправляется 
в программу обработки. Набор параметров при этом отделяется от основного (ИВТ. знаком во- 
проса “?”, а параметры друг от друга — символом амперсанда “&”. 


102 Часть 1. НТМЕ 


Пример 5.1 
ВЕЕР: / /мми .вотераде.сот/зп4ех.рёр?рахгашеёг1&рагатеег2& рагатеёгЗ 


Метод розЕ применяется в тех случаях, когла полученные из формы данные необхо- 
димо сначала обработать, — например, проверить правильность заполнения формы. 
Данные передаются в закрытом виле в теле НТТР запроса к серверу. 

При использовании метода розЕ содержимое формы при отправке кодируется. Спо- 
соб кодирования задается в атрибуте епскуре. По умолчанию используется значение 
епссуре="арр11саЕ1оп/х-млми-Еогт-иг1епсоаеа" — шестнадцатеричная коди- 
ровка. В случае использования в форме элемента ІМРОТ с атрибутом суре="Е11е" луч- 
ше в качестве значения указать епссуре="пи1 ЕёракЕ/оги-дака". При этом данные 
‘передаются в двоичном виде, что позволяет более эффективно осуществлять отправку 
большого объема данных. 

Последний атрибут, на котором стоит остановиться, это сагоес. По аналогии с од- 
ноименным атрибутом элемента А, он задает имя окна, в которое возвращается результат 
‘обработки формы. По умолчанию результат выводится в то же окно, откуда был отправ- 
‘лен. Подведем итоги в уже традиционной лля нас таблице атрибутов элемента (табл. 5.1.) 


Таблица 5.1 Атрибуты элемента <РОВМ> 


Атрибут Описание Пример 

пате Определяет имя формы, уникальное для данного пате" Ёогт"1" 
документа. Используется, если в документе не- 
сколько форм 


ассіоп Обязательный параметр. Определяет ИВЦ. по ко- асііоп="соі-Ьіп/Ећапкв.р1" 
торому будет отправлено содержимое формы. 
Это может быть либо адрес электронной почты, 
либо путь к сценарию на сервере, обслуживаю- 
щему данную форму 
тесһод Определяет способ отправки содержимого формы; тесћоа= "роѕє" 
возможные значения ег (по умолчанию) и роѕ 
епсЕуре Определяет способ кодирования содержимого епссуре= "пи1сіраге/Ёоги-даса" 
формы при отправке; по умолчанию использует- 
Сяарр1ісасіоп/х-мум- Ғогт-иг1епсодей. 
ти1сіраге/ Еогт-даба — для эффективной от- 
правки большого объема данных (файлов) в дво- 
ичном виде можно использовать способ ти1сі – 
раге/ Ёогт-даса 
тагдес Определяет имя окна, в которое возвращается Багдеб="_Ь1апк" 
результат обработки отправленной формы. По 
умолчанию результат возвращается в то же окно, 
‘откуда был отправлен. Возможные значения: 
_ве1Е, _рагепе, сор, Ь1агк (в новое окно) 
или явно указанное имя окна. Подробное описа- 


ние значений см. в атрибуте сагсес элемента А. 
Элемент МРОТ и его богатые возможности 


Практически любой элемент интерфейса формы можно создать с помощью элемента 
ТМРОТ. Этот элемент является пустым, т.е. не имеет закрывающего тега. Практически 
пля всех типов элементов, которые могут быть созданы с помощью элемента ТМРОТ, яв- 
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ляется необходимым атрибут пате. Он определяет имя, используемое при передаче со- 
держания данной формы на сервер, и обычно применяется для идентификации поля или 
логически связанной группы полей, таких как переключатели. 

Тип элемента определяется атрибутом буре. Разберем каждый возможный тип эле- 
мента формы отдельно. 


Текстовое поле (Техї) 


Атрибут суре=" сех" (значение по умолчанию) создает простое однострочное тек- 
стовое поле, в котором можно редактировать уже введенный текст или вводить свой. Ат- 
рибут ѕі ге задает размер текстового поля в символах, которые могут быть одновременно 
видны в поле. При вводе большего количества символов, поле булет автоматически про- 
кручиваться (без появления полосы прокрутки). 

Атрибут тах1епоєһ залает максимальное количество символов, включая пробелы, 
которое можно ввести в данное поле. В примере 5.2 лля данного атрибута указано значе- 
ние 60; это означает, что при ввода в поле 61-й символ там просто не появится. По умол- 
чанию количество символов не ограничено. 

Атрибут уа1ие задает текстовое значение или заголовок для полей любого типа, в том 
числе и кнопок. Для текстового поля этот атрибут задает содержимое поля, которое поль- 
зователь может либо стереть, либо отредактировать. Если атрибут уа1џе не задан, то тек- 
стовое поле исходно будет пустым. 


Пример 5.2 


<РОВМ асбіоп="таї1.р1"> 
<Р>Текстовое поле: 
<ІМРОТ буре="сехе" паше=“Еехе“ віге="20" пахлепаЕН="60* 
уа1џе= "Введите текст"> 
</Р> 
</РОВМ> 


Здесь создается простейшая форма с одним текстовым полем размером 20 символов. 
Внутри элемента РОВМ, кроме элементов, создающих управляющие элементы формы, 
можно использовать любые другие элементы языка НТМІ.. В данном примере использу- 
ется элемент параграфа, — чтобы добавить к текстовому полю подпись. В окне браузера 
такая форма будет выглядеть так, как показано на рис. 5.5. 


[Текстовое поле [Веедите текст 


Рис. 5.5. Текстовое поле 


Для работы с текстовыми полями используются также два булевых атрибута: ді5- 
ар1еа и кеадоп1у. Задание атрибута ді ѕаЬ1еа блокирует поле от возможности изме- 
нения и даже не позволит переместить в него фокус ввола, т.е. установить в нем курсор. 
При задании атрибута діѕаЬ1еа поле примет стандартный для операционной системы 
“неактивный” вид, т.е. будет окрашено бледно-серым цветом. Атрибут кеадоп1у делает 
поле доступным только для чтения, т.е. запрещает его редактирование, но позволяет ус- 
тановить в него фокус ввода. Это позволит, например, выделить и скопировать его со- 
держимое. Внешний вид поля при этом не отличается от обычного. 


Атрибуты 41 за 1еа и геадоп1у применимы и для других типов управляющих элементов. 
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Текстовое поле для ввода пароля (Раѕѕмога) 


Атрибут Еуре="раззмога" создает простое однострочное текстовое поле, в котором 
вводимый в него текст не отображается; вместо него появляются специальные символы, 
например звездочки. Это позволяет скрыть введенный текст, что необходимо, например, 
при вводе паролей. Длину пароля можно ограничить атрибутом тах1епосһ. Остальные 
атрибуты аналогичны простому текстовому полю. 


Пример 5.3 


<РОВМ асбіоп= "таі1.р1"> 
<Р>Текстовое поле: 
Введите пароль: <ТМРОТ пуре="раѕвиога" папе-"раѕз" 512е="10" 
пах1епосћ="10"> 
</Р> 
</РОВМ> 


Вокне браузера при попытке ввести в такое поле текст увидите то, что показано на рис. 5.6. 


[Введите пароль жав 


Рис. 5.6. Помещение значения 
в поле для ввода пароля 


Флажки (Сһескбох) 


Атрибут суре="Сһескрох" создает один флажок. Если нужно создать набор из пяти 
флажков, придется пять раз написать <ІМРОТ буре="сһескЬох" пате=" #1а9№"> 
и задать соответствующие атрибуты. Рассмотрим пример создания набора флажков, 
предназначенного для выбора графика рабочих дней. 
<РОКМ ассіоп="могкдау.р1"> 

Выберите предпочтительные рабочие дни:<ВВ> 

<ТМРОТ куре="снесКЬох" папе="дау1" уа1џе="поп" снескеа>Понедельник<ВВ> 

<ТМРОТ буре= "дау2" "сие" сһескей>Вторник<ВВ> 

<ТМРОТ буре= меа" сһескед>Среда<Вк> 

<ІМРОТ буре= ЕВи" срескед>Четверг<ВВ> 

<ТМРОТ буре= Ері" сһескед>Пятница<ВК> 

<ТМРОТ буре: ѕас">Суббота<ВЕ> 

<ТМРОТ буре="сһескрох" папе="дау7" вап">Воскресенье<ВВ> 
</ЕОВМ> 


С помошью этого НТМГ-кода создается набор из 7 флажков, каждый из которых 
представляет определенный день недели. В окне браузера этот код булет выглядеть так, 
как показано на рис. 5.7. 


Выберите предпочтительные рабочие дни 
7 Понедельник 

12 Вторник 

Р Среда 

Р Четверг 

Р Пятница 

Г Суббота 

Г Воскресенье 


Рис. 5.7. Флажки, при описании кото- 
рых задан булев атрибут снескеа, ис- 
ходно будут выбраны 
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Пользователь может оставить все как есть либо выбрать другой набор дней недели. 
Атрибутом сһескеа обычно помечают те пункты, которые представляются наиболее ве- 
роятными для выбора. 

Как же программа обработки такой формы узнает, какие дни выделены пользовате- 
лем, а какие нет? Программа получит значения переменных дау1, дау2 и т.д. Если ка- 
кой-то день выбран, то переменная будет иметь значение, заданное атрибутом уа1џе, 
иначе, если она не выбрана, значение переменной будет не определено. В нашем приме- 
ре переменные дау1-дау5 будут иметь следующие значения: 


аау1="поп"; 
Чау2="кие"; 


а переменные дауб и дау? будут не определены. 


Переключатели (Вад) 


Атрибут Суре= "гайіо" создает переключатель. По аналогии с флажками для создания 
нескольких переключателей требуется несколько элементов <ТМРИТ буре="гадіо" 
паще="га@1о">. Так как при работе с переключателями возможен выбор только одного 
значения, то все элементы такого типа, принадлежащие одной группе, должны иметь одно и 
то же имя, например: 
<РОВМ асЕ1оп-"ракку.р1"> 

Как провести выходные: <ВВ> 

<ТМРОТ гуре="ха@1о" папе="рахЕу“ уа1ш 


<ТМРОТ суре=“га@1о“ папе= "рагбу" уа1ш 
</ЕОВМ> 


90" сһескед>пойти на вечеринку<ВЕ> 
пордо">не пойти на вечеринку<ВЕ> 


Атрибут сһескеа имеет то же значение — исходно выбирает элемент. В окне браузе- 
ра данный код отобразится так, как показано на рис. 5.8. 


Ках провести выходные 


© пойти на вечеринку 
С не пойти на вечеринку 


Рис. 5.8. Действие атри- 
бута сһескей на поле 
типа гайіо 


При передаче значений в программу обработки такой формы значение переменной 
рагу будет равно "со" или "поёдо" — в зависимости от выбора пользователя. 
Кнопка отправки ($ибтй) 


Атрибут суре= "иртіс" создает кнопку отправки содержимого формы программе- 
обработчику на МеЬ-сервер. 


Пример 5.4 
<РОВМ ассіоп="таї1.р1"> 

<ТМРОТ буре="еиртіб" папе=*"виртіб" уаїџе=* "> 
</ЕОЕМ> 


При этом будет создана стандартная кнопка с надписью “Отправить”. Пользователь 
заполняет необходимые поля формы, и после щелчка на такой кнопке они отправляются 
на обработку. 
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Графическая кнопка отправки (ітаде) 


С помощью атрибута суре="ітасе" можно создать графическую кнопку отправки. 
При этом изображение для кнопки можно подготовить в графическом редакторе, а затем 
использовать его в форме в качестве кнопки отправки. ОКІ. используемого графического 
файла задается в атрибуте экс по аналогии с элементом ІМС. Аналогичным образом изо- 
бражению задается и вертикальное выравнивание — с помощью атрибута а1 19п. 

Рассмотрим пример создания такой кнопки. Пусть имеется изображение БаЕ- 
Соп. оі, которое мы хотим использовать в форме в качестве кнопки отправки. Подго- 
товим следующий НТМІ.-код: 
<РОВМ асбіоп="таі1.р1"> 

<ТМРОТ буре="іпаде" папе= "Ыис" вгс 
</РОВМ> 


ітадеѕ/Ьчссоп.9іё" а1ісп="Боссот"> 


При передаче данных серверу ему также сообщаются координаты х и у той точки на 
изображении, где пользователь щелкнул кнопкой мыши. Координаты измеряются от 
верхнего левого угла изображения. При этом информация о координатах шелчка в поле 
типа ітасе записывается в виде 2-х пар значений. Значения координаты х измеряются в 
пикселях от левого края изображения, а значение координаты у — также в пикселях, но 
от верхнего края изображения. При этом к имени элемента, заданном для него в атрибуте 
пате, добавляются суффиксы . х (в случае х-координаты) и .у (в случае у-координаты). 
Допустим, что щелчок был выполнен в точке с координатами (25, 13), тогда в нашем слу- 
чае получим такие значения: Боё.х = 25 иБџё.у = 13. 


Кнопка очистки (Веѕеї) 


Атрибут суре="геѕеі" создает кнопку, позволяющую восстановить значения всех 
полей, измененные пользователем. В текстовые поля при этом помещаются значения, 
заданные атрибутом уа1џе, а во флажках и переключателях выбираются те значения, ко- 
торые были помечены как сћескеа. Пример кода такой кнопки: 


<ІМРОТ куре=“гевеЕ“ папе="гезес" чаїџе="Очистить"> 


Выглядеть она будет точно так же, как и кнопка типа зил, только выполняет она 
другие действия. 


Произвольная кнопка (ВиНоп) 


Атрибут суре="БаеЕоп" создает произвольную кнопку. Для таких кнопок действие 
по умолчанию не определено, а браузеры пользователей должны использовать в качестве 
надписи на кнопке значение атрибута уа1џе. С атрибутами событий каждой такой кноп- 
ки (щелчок мышью на кнопке или другое событие) могут быть связаны программы обра- 
ботки этих событий, которые могут выполнять определенные действия. Эти программы 
обычно называют сценариями, и выполняются они непосредственно браузером пользо- 
вателя, без передачи данных на МеБ-сервер. Пишут их на специальных языках програм- 
мирования, подобных Јауа$Ѕсгірі, ЈЅсгір: или УВ$спр!. Программный код сценария по- 
мещается внутрь элемента ЅСЕІРТ, который может находиться в любом месте НТМ!- 
документа. Подробнее о сценариях рассказывается ниже, в соответствующем разделе. 


Пример 5.5 
<ЗСВТРТ Еуре="ЕехЕ/3ауазск1рЕ"> 


<!-- 
Ғипссіоп зепааака() { 

код функции на языке Јауабсгірё 
} 
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</ЗСВТРТ> 
= код других элементов НТМІ... 
<РОВМ> 

-. другие элементы формы „. 

<ІКРОТ Куре=“ЬаЕкоп" папе="Ьшс" уа1ше="Кнопка" опс14ск="верадака() "> 
<ЕОЕМ> 

При щелчке мышью на описанной в этом примере кнопке будет вызвана функция Јауа- 
Ѕегірі зепадака (). Внешний вид кнопки будет такой же, каку кнопок типа ЅиЬті 6 и Кеѕес. 


Добавление файлов (Ее) 


Атрибут суре=" Е11е" создает управляющий элемент с кнопкой обзора, имеющей назва- 
ние Вгомѕе, при щелчке на которой открывастся окно Сћооѕе Ре, позволяющее просмот- 
реть дерево папок ресурсов компьютера и выбрать требуемый файл. Данное значение поддер- 
живается браузерами лете! Ехріогег (версия 4.0 и выше) и Мезсаре Мамрагог (версия 3.0 и 
выше). Согласно спецификации НТМГ 4.01, браузеры могут в качестве начального файла 
брать значение, заданное в атрибуте уа1це, но не делают этого. Выбранный с помощью дан- 
ного управляющего элемента файл передается на сервер вместе с данными формы. 

Использование атрибута куре="Е11е" в форме позволяет для всей формы задать 
двоичную кодировку при отправке: епсбуре= "пи1Е1раг® / Ёогт-даба". 


Пример 5.6 


<РОВМ астіоп="таі1.р1" епскуре="ии1Езраге/Еогт-дака“> 
-. другие элементы формы — 
Выберите файл для загрузки: 
<ІМРОТ буре="Ғі1е" паме-"1оаа"> 

<РОБМ> 


В окне браузера вы увидите кнопку, показанную на рис. 5.9. 
ТАЕ изир а АИ =) 


тос 2 2 Әб Ране обеда 09 5-5 
Адзе [2] Самотни 


Выберите файл для загрузки Втомве.. 


Рис. 5.9. Внешний вид элемента типа Ғі1е с кнопкой просмотра дерева папок. 
для выбора файла и окно Сһооѕе е, открывающееся при щелчке на этой кнопке. 
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Скрытый управляющий элемент (Нійдеп) 


С помощью атрибута буре= "Һійдеп" можно создать скрытый от пользователя управ- 
ляющий элемент. В нем в качестве значения атрибута уа1џе можно хранить статическую, 
т.е. неизменяемую пользователем информацию, которая будет передаваться вместе с динами- 
ческим содержимым формы, — например, информацию о взаимодействии клиента и сервера. 
<РОВМ> 


- другие элементы формы .. 
<ТМРОТ буре=*Һійдеп" пале="зеае1с" уаїџе="всакіс зпЕогтаЕ4оп"> 
<РОЕМ> 


Таким образом, мы рассмотрели основные типы управляющих элементов, которые 
можно создать при помощи элемента и его атрибутов. Итоги подведены в табл. 5.2. 


Таблица 5.2. Атрибуты элемента <1МРОТ> 


Атрибут Описание Пример 

папе Определяет имя, используемое при передаче содержания папе-"1аѕё папе" 
данной формы на сервер 

буре Определяет тип управляющего элемента ( по умолчанию зна- “буре=" #і1е" 


чение "бехе "). 

Сех — создает элемент для ввода текста из одной строки. 
раѕемога — аналогичен значению бехе, но вводимый текст 
представляется таким образом, чтобы не отображать вводи- 
мые пользователем символы — например, в виде ряда звез- 
дочек. Этот управляющий элемент часто используется для 
ввода паролей. 

снесКЪох — создает флажок (множественный выбор). 

гадіо — создает переключатель, т.е. набор кнопок с зависи- 
мой фиксацией (выбрать можно только один вариант). 
ѕиопіс — создает кнопку отправки содержимого формы. 
імасе — создает графическую кнопку отправки, причем зна- 
чение атрибута эгс задает ОАІ изображения, используемого 
‘для представления кнопки. 

геѕес — создает кнопку сброса полей формы. 

ЪмЕБоп — создает кнопку с произвольным действием, дейст- 
вие по умолчанию не определено. 

Ћіадеп — создает скрытый управляющий элемент. 
ҒіЛе — создает управляющий элемент “Выбор файла” 
Браузеры могут использовать значение атрибута уа1џе в ка- 
честве исходного имени файла. 


уа1че Задает текстовый заголовок для полей любого типа, втомчислеи \а1ие-="Еета1е" 
кнопок. Для типов, имеющих значение типа воо1еап (отмеченный 
или неотмеченный), таких как снескЬох или гаазо, в программу- 


обработчик будет возвращено значение, заданное в атрибуте 
уаіџе 


сһескей Указывает, что элемент управления типа свескрох или гадіо сһескеа 
является исходно выбранным 


іѕаЬ1ей Установка этого булевого атрибута запрещает пользователю ЗіѕаЬ1ед 
редактировать содержимое поля ввода и даже помещать в не- 
го фокус ввода 
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Окончание табл. 5.2 
Атрибут Описание Пример 


теадопіу Указывает, что поле ввода закрыто для редактирования, но теадоп1у 
пользователь может поместить в него фокус ввода и, напри- 
мер, выделить и скопировать его содержимое 


зіте Определяет размер поля в символах зіте="24" 


тах1епоёһ Определяет максимальное количество символов, которое 
можно ввести в текстовом поле. Оно может быть больше ко- 
личества символов, указанных в параметре 53 ге, в этом слу- 
чае поле будет прокручиваться (=сго11). По умолчанию коли- 
чество символов не ограничено 


вес Задает УВ!-адрес картинки, используемой при создании 
графической кнопки отправки данных. Используется совме- 
стно с атрибутом куре="Змаде" 


а1ідп Определяет способ вертикального выравнивания для изо- а1ісп="Ьоссот" 
бражений. Используется совместно с параметром 


Многострочное текстовое поле — элемент ТЕХТАВЕА 


Если необходимо предоставить пользователю возможность вводить в форму доста- 
точно объемную текстовую информацию, — например, текст почтовых сообшений, соб- 
ственные комментарии к прочитанной статье или нечто подобное — пользоваться одно- 
строчным текстовым полем в таком случае будет неудобно. Пользователь не сможет уви- 
деть на экране вводимый текст полностью, что затруднит возможность его 
редактирования. Для таких целей лучше использовать многострочное текстовое поле, ко- 
торое создается элементом ТЕХТАВЕА. 


Пример 5.7 


<ТЕХТАВЕА со15="40" комз="5" папе="пеѕѕаде" мгар="уігёџа1"> 
Введите текст сообщения 
</ТЕХТАВЕА> 

Как видите, в отличие от ТМРОТ, этот элемент не является пустым, т.е. у него имеются 
‘оба тега. Между ними может располагаться текст, который помещается в это поле в каче- 
стве начального. Если исходно поле должно быть пустым, то, соответственно, ничего 
между тегами не пишете. 

Атрибут со1 5 задает ширину поля в печатных символах по аналогии с атрибутом ѕіге 
элемента ТМРОТ. Количество видимых строк тестового поля задается атрибутом гоме. Та- 
ким образом, в нашем примере поле будет размером 40 символов в ширину и 5 строк в вы- 
соту. 

Атрибут мғар задает способ переноса слов в многострочном текстовом поле. По 
умолчанию используется значение игар=“оЕЕ", и переноса слов не происходит, строки 
передаются программе-обработчику в том виде, как они были напечатаны. Значение 
мгар= "уігсџа1" включает перенос слов, но при этом все введенные строки передаются 
программе-обработчику как одна строка, без переводов строк. Значение мтар="рНув1са1" 
включает перенос слов, причем символы перевода строки передаются вместе с содержимым 


формы. 
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Надо иметь в виду, что браузер {егпе! Ехріогег версии 3.0 по умолчанию в элементе 
ТЕХТАВЕА просто переносил слова, пока в версии 4.0 не реализовали поддержку атрибута 
утар. Также в браузерах Месаре 4.0 и Імегпе! Ехріогег 4.0 и выше были изменены до- 
пустимые значения атрибута мгар на оЕЕ, зоЕЁ и Вага соответственно. Какое значение 
для способа переноса задавать, зависит от того, для каких целей потом будет использо- 
ваться текст, введенный в это поле. 

Для запрета редактирования содержимого поля, по аналогии с элементом тМРОТ, ис- 
пользуются атрибуты діѕар1еа (для полного запрета редактирования) или геадоп1у 
(для запрета изменения содержимого). Все сказанное выше обобщено в табл. 5.3. 


Таблица 5.3. Атрибуты элемента <ТЕХТАЯЕА> 


Атрибут Описание Пример 

Мапе Обязательный параметр. Определяет название, которое будет пале-"аййгезз" 
использоваться при идентификации заполненного поля сервером. 

Вом5 Определяет количество строк текста, видимых на экране хомз="3* 

Со15 Определяет ширину текстового поля в печатных символах со15="40" 

мтар Определяет способ переноса слов в данном поле. Возможные мар="уігеџа1" 
значения: 


оЕЕ — перенос слов не происходит (значение по умолчанию); 
уігеца1 (зо) — перенос слов только отображается, на сер- 
вер же поступает неделимая строка; 

рћуѕіса1 (вака) — перенос слов будет происходить, и на сер- 
вер поступают строки, разделенные во всех точках переноса 


дізаріей Установка этого булевого атрибута запрещает пользователю редак- 91за51еа 
тировать содержимое поля и даже помещать в него фокус ввода 


хеайопіу Указывает, что поле закрыто для редактирования, но пользова- хеадоп1у 
тель сможет поместить в него фокус ввода 


Раскрывающиеся списки — элемент 5ЕЪЕСТ 


Для того чтобы предоставить пользователю возможность выбора одного варианта из 
предложенного множества значений, можно создать такой элемент формы, как список 
(по-другому его иногда называют меню). Создается он при помощи элемента ЅЕГЕСТ, 
акаждый элемент множества допустимых значений создается элементом ОРТТОМ. Этот 
элемент может не иметь конечного тега и используется только с элементом ЅЕЕСТ. 


Рассмотрим пример выбора дней недели, например, для того чтобы задать дни, когда 
должен звонить будильник: 


<ЅЕІЕСТ пате="дау" в12е="7"> 
<ОРТІОМ уа1е=“поп">Понедельник 
<ОРТТОМ сие">Вторник 
<ОРТТОМ *Бие“>Среда 
<ОРТТОМ ЕВи">Четверг 
<ОРТТОМ "Егіе>Пятница 
<ОРТТОМ уа1џе="вас">Суббота 
<ОРТТОМ үа1џе="вап">Воскресенье 

</ЗЕЪЕСТ> 


При этом в окне браузера увидим список, показанный на рис. 5.10. В этом списке 
7 элементов — это дни недели. Если мы хотим, чтобы все они были видны на экране без 
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дополнительной полосы прокрутки, необходимо задать нужный размер поля списка при 
помощи атрибута ѕіге. В нашем примере для него задано значение, равное количеству 
элементов списка — их не так много, и можно себе позволить, чтобы все они были одно- 
временно видны на экране. Если задать значение, меньшее 7, например 4, то на экране 
будет одновременно видно только четыре значения, и появится полоса прокрутки. 


Рис. 5.10. Внешний вид списка с не- 
сколькими допустимыми значениями 


Из этого списка щелчком мыши можно выбрать только один элемент. Если мы хотим 
запрограммировать будильник не на один день, а, например, на все будние дни, — в та- 
ком списке это нам не удастся. Чтобы разрешить множественный выбор значений спи- 
ска, в элементе ЗЕЪЕСТ необходимо указать булев атрибут ти1сір1е. Это позволит вы- 
бирать в нем два и более элементов. Множественный выбор осуществляется при нажатой 
клавише <Сїгі> (для произвольного выбора элементов) или <ЗШЙ> (для выбора диапазо- 
на значений). 
<5ЕЦЕСТ папе="дау" 512е="7" пи1сір1е> 

„~ код элементов списка... 
</5ЕГЕСТ> 

Чаще всего людям приходится заводить будильник именно на будние дни, т.е. значе- 
ния с понедельника по пятницу будут скорее всего выбраны пользователем. Сразу поме- 
тить элемент списка как выбранный можно заданием булевого атрибута ѕе1есбеа в 
элементе ОРТТОМ. Если записать такой код: 
<БЕБЕСТ папе="дау" ѕіте="7" пи1сір1е> 

<ОРТТОМ уа1ие="топ" ве1еске4>Понедельник 

<ОРТІОМ уаІце=" Еше" зе1ескед>Вторник 

<ОРТІОМ уаїџе="сџе" ѕеїесбед>Среда 

<ОРТТОМ үа1џе=" Сһи" ѕе1есбед>Четверг 

<ОРТТОМ уа1ие="Ёк1" ѕе1есбед>Пятница 

<ОРТТОМ уа1џе= "ѕас">Суббота 

<ОРТТОМ уа1џе="ѕап">Воскресенье 
</ЗЕЦЕСТ> 
то получим список с множественным выбором, в котором уже отмечены все будние дни. 
Пользователь сможет изменить выбор, сделанный по умолчанию, или принятьего как есть. 

Чтобы получить классический раскрывающийся список, нужно задать значение атри- 
бута 512е=" 1". Тогда на экране будет виден только один пункт списка, а остальные ста- 
нут доступны, если шелкнуть на кнопке со стрелкой справа от него. Часто при работе 
с раскрывающимся списком его первым элементом делают текстовую строку, описы- 
вающую список. В нашем случае такой строкой могла бы стать следующая: 
<ЗЕБЕСТ папе="дау" з#2е="1"> 


<ОРТТОМ уа1џе="попе">--- Выберите день недели --- 
„~ код других элементов списка... 
</ЗЕЪЕСТ> 


Если нужен множественный выбор — лучше пользоваться простым списком, но если 
из списка предполагается выбрать только один элемент, то можно оформить его и в виле 
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раскрывающегося списка. Создать раскрывающийся список с множественным выбором 
у вас тоже получится, но пользоваться им будет очень неудобно. 

Существует элемент ОРТСВООР, позволяющий группировать элементы списка по раз- 
личным признакам — например, можно сгруппировать месяцы по временам года: 


<5ЕГЕСТ паме=“пюпЕВ” ѕі2е="1"> 

<ОРТТОМ үаІце="попе">--- Выберите месяц ---</ОРТТОМ> 
<ОРТСВОЦР 1аЪе1="Зима"> 
<ОРТТОМ уаїџе= "дес">Декабрь</ОРТТОМ> 

<ОРТІОМ уа1џе=*јап">Январь</ОРТТОМ> 
<ОРТТОМ уа]1џе=" Ғер">Февраль</ОРТІОМ> 

</ОРТСКО0Р» 

<ОРТСВОПР 1аре1= "Весна" > 


<ОРТТОМ уа1џе= "пау" >Май</ОРТІОМ> 


</ОРТОВОЙР> 
<ОРТСВОПР 1аЪе1 ="Лето"> 
<ОРТТОМ уа1џе=" јип">Июнь</ОРТІОМ> 
<ОРТТОМ уа1ше=" 1 ">Июль</ОРТТОМ> 
<ОРТТОМ уа1е="аид">Август</ОРТТОМ> 
</ > 
<ОРТСВООР 1аБе1="Осень"> 
'зер">Сентябрь</ОРТТОМ> 
оКЕ">Октябрь</ОРТТОМ> 
поу">Ноябрь</ > 


</ОРТСВОПР> 
</ЗЕВЕСТ> 

Обратите внимание, что в этом примере все элементы ОРТТОМ имеют закрывающие 
теги, это обязательно в данном случае. Иначе браузсры, например Іпіегпе! Ехрюгег, могут 
не понять, где заканчивается одна группа и начинается другая. Список тогда будет обыч- 
ным, без деления на группы. 

Атрибут 1аБе1 элемента ОРТСВОЦР задает название группе элементов. Браузеры 
пользователей должны отображать такой код любым способом, сохраняющим структуру 
элементов списка. Браузеры мегпеі Ехріогег 6.0 и МохШа 1.6 делают это одинаково, 
только Имегпе! Ехр]огег открывает список частично, и в результате появляется полоса 
прокрутки (рис. 5.11), а МогШа целиком (рис. 5.12). Браузер Орега 7.5 (рис. 5.13) отобра- 
жает элементы ОРТСВОЧР немного иначе и, так же как и Мо2Ша, показывает список це- 
ликом. Все сведения об элементе ЅЕГЕСТ подытожены в табл. 5.4, а в табл. 5.5 представ- 
лены атрибуты элементов ОРТТОМ и ОРТСВОТР. 


[- Выберите несяц— # 


риа 
Декабрь 


Рис. 5.11. Групповой список 
в браузере Ітетег Ехргег 6.0 
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Рис. 5.12. Групповой спи- Рис. 5.13. Групповой спи- 
сок в браузере Мога 1.6 сок в браузере Ореға 7.5 


Таблица 5.4. Атрибуты элемента <ЅЕЦЕСТ> 
Атрибут Описание Пример 


пале Определяет имя списка, уникальное для данной формы, которое папе=“ѕес" 
будет использоваться при передаче данных на сервер. Каждый вы- 
бранный элемент списка при передаче на сервер будет иметь вид: 
пале. уа1ие. Значение (уа1 се) формируется элементом ОРТТОМ 


то1сір1е Разрешает выбор сразу нескольких элементов списка. По умол- пи1сір1е 
чанию можно выбрать только один элемент 


Біте Определяет количество видимых элементов в списке: зіге 
1 — простой раскрывающийся список; 


если значение этого параметра больше единицы, то результатом 
будет список с полосой прокрутки 


Таблица 5.5. Атрибуты элементов <ОРТЮМ> и <ОРТСВОИР> 
Атрибуты Описание Пример 


<ОРТІОМ> 


зе1ессеа Определяет элемент списка, который будет изначальновы- См. пример выше 
бран при загрузке документа. Если список разрешает вы- 
брать только один элемент, то атрибутом ѕзе1 есед может 
быть помечен лишь один элемент списка 


уа1е Задает данному элементу списка значение, которое будет ис- См. пример выше 
пользовано наряду с другими сведениями о содержимом за- 
полненной формы. При предоставлении информации на сер- 
вер это значение будет объединено со значением параметра 
пале в элементе зеЕБЕСТ 


1абе1 Задает название группе элементов. 1аБе1= "Осень" 
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Кнопки — элемент ВУТТОМ 


Кнопки в форме можно создавать и при помощи элемента ВОТТОМ, который обязательно 
должен иметь открывающий и закрывающий теги. Возможности таких кнопок несколько ши- 
ре, чем у кнопок, созданных при помощи элемента ТМРОТ, хотя действуют они так же. 

Тип кнопки определяется значением атрибута суре. Допустимы значения, аналогич- 
ные элементу ТМРОТ: ѕџрті Е, гезее и Баесоп. 

Кнопки, созданные элементом ВОТТОМ, могут иметь содержимое, которым может 
быть текст или графический файл. Сводные данные об атрибутах этого элемента приве- 
дены в табл. 5.6. 


Пример 5.8 


<ВОТТОМ паме=“кезее" гуре=“гезее"> 
Очистить <ТМб вгс="ітадев/гесусІег.сіє" а1Е=“отправить в корзину"> 
</ВОТТоМ> 


Таблица 5.6. Атрибуты элемента <ВИТТОМ> 
Атрибут Описание Пример 


папе Определяет название элемента, которое будет использоваться пате= "Биёсоп" 
при идентификации заполненного поля сервером 


Туре Определяет тип кнопки: Суре="геѕес" 
вирті — создает кнопку отправки, используется по умолчанию; 
теѕес — создает кнопку очистки формы; 
ЪиеЕоп — создает кнопку произвольного действия 


уа1ие Задает текстовый заголовок для кнопки "Очистка" 


Метки — элемент АВЕС 


С некоторыми элементами формы можно связать метки. Метка в данном случае — это 
текстовое описание элемента формы, которое не содержит его в явном виде, — например, 
для полей ввода, флажков и переключателей. Для элементов-кнопок в качестве метки ис- 
пользуется значение их атрибутов уа1џе, которое отображается на этих кнопках. 

Ранее мы рассматривали вот такой пример создания переключателей: 


<ЕОВМ асбіоп="рагсу.р1"> 
Как провести выходные: <ВВ> 
<ІМРОТ ёуре="гадіо" пате="рагсу" уа1џе="9о" сһескед>пойти на вечеринку 
<ВА> 
<ТМРОТ буре="гадіо" пате="рагбу" уа1џе="побсо">не пойти на вечеринку 
</ЕОВМ> 


То же самое можно сделать, связав с каждой радиокнопкой элемент-метку. Связь ме- 
жду ними осуществляется при помощи атрибута Бог, в качестве значения которого ука- 
зывается имя элемента, с которым данная метка будет связана. 


<РОВМ ассіоп="рагбу.р1"> 
Как провести выходные:<ВВ> 

<ТМРОТ суре="гайіо" папе="раксу" уа1џе="со* сһескей> 
<АВЕ Ғог="рагбу">пойти на вечеринку</ПАВЕШ> 

<ВВ> 

<ІМРОТ буре="гадіо" пале="ракеу" уа1ие="поечо"> 
<ТАВЕГ Ғог="рагіу">не пойти на вечеринку</ПАВЕЦ> 
</РОВМ> 
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Первый вариант горазло короче и понятнее, а в браузере оба варианта выглядят оди- 
наково, поэтому лучше пользоваться именно первым. 


Пример формы регистрации пользователя на сайте 


Чтобы подытожить все, что было сказано выше, приведем пример формы, предназна- 
ченной для регистрации пользователя на сайте. Заодно вспомним, что внутри элемента 
ЕОВМ могут находиться и другие элементы НТМІ.. В данном случае для выравнивания 
элементов формы на странице используется таблица. В этой таблице два столбца, причем 
содержимое первого выровнено по правому краю, а второго — по левому. Чтобы задать 
между строками таблицы расстояние, используется атрибут се11раадіпо= "3", отобра- 
жение границ таблицы отключено посредством указания атрибута рогдег= "0". Ячейки 
последней строки таблицы объединены в одну для того, чтобы кнопки отправки и очист- 
ки располагались по центру таблицы. Между кодами кнопок расположены два спецсим- 
вола неразрывных пробелов, эта маленькая хитрость позволяет задать расстояние между 
этими кнопками. 


Итак, полный код формы приведен в листинге 5.1. Советую скопировать его в НТМЕ- 
документ и потратить время на то, чтобы разобрать его, строка за строкой, пока не станет 
понятен смысл каждого символа этого кода. 


Листинг 5.1. Код формы регистрации пользователя на сайте 


<РОВМ асбіоп= "Һр: / /иму.дотвсгој .ка/ргод/айаивек" песһой="рове"> 
<ТАВИЕ се11райӣіпо="3* се! 1зрасіпс="0° Богдег=*0"> 
<САРТТОМ><НЗ>Заполните регистрационную форму</НЗ></САРТІОМ> 
<ТВ> 
<тр а1ісп="гідһе">Имя: </тр> 
<Тр><ІМРОТ буре="бехе" пап 
</тв> 
<тВ> 
<ТР а1ісп="гідћс">Фамилия: </ТО> 
<Тр><ІМРОТ куре="сехЕ" папе="1аѕіпапе" зіге="20" пах1епаЕН="50"></тТр> 
</тв> 
<ТВ> 
<тр а119т="к19ВЕ">е-паз1: </тО> 
<ТР><ІМРОТ куре="сехе" папе="етаі1" віте="20" тах1епаёћ="50"></70> 
</тв> 
<ТВ> 
<тр а14от="х49ВЕ">Пароль: </тр> 
<ТО><1МРОТ куре=“равзмогА" папе="раѕв1" ѕізе="20" тахІепобћ="10"></1р> 
</ТВ> 
<ТВ> 
<тр а1ісп="гідћс">Повтор пароля: </ТО> 
<ТЬ><ТМРОТ буре="равѕмока" папе="раѕв2* віте="20" тахіепасћ= "10"></тр> 
</тв> 
<тв> 
<ТО аїісп="гідће">Дата рождения: </тр> 
<тр> 
<ЗЕГЕСТ папе="дау" віғе="1°> 
<ОРТІОМ уа1џе="1">1</0РТІОМ> 
<ОРТТОМ уа1ие="2">2</ОРТТОМ> 
=. промежуточные пункты списка -— 
<ОРТТОМ уа1ие="31“>31</ОРТТОМ> 
</ЗЕБЕСТ> 
<ЗЕЦЕСТ пале="топећ" віге="1"> 
<ОРТТОМ уа1џе="јап">Январь</ОРТІОМ> 
<ОРТТОМ уаІџе="Ғер">Февраль</ОРТІОМ> 
<ОРТТОМ уаџе="паг">Март</ОРТІОМ> 


пате" 512е="20" тах1епоасћ="20"></тр> 
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<ОРТТОМ 'арг">Апрель</ОРТТОМ> 
<ОРТТОМ ‘пау">Май< /ОРТТОМ> 
<ОРТТОМ Эип">Июнь</ОРТТОМ> 
<ОРТТОМ 31 ">Июль</ОРТТОМ> 
<ОРТТОМ ацд">Август</ОРТІОМ 
<ОРТТОМ ="зер">Сентябрь< /ОРТТОМ> 
<ОРТТОМ оКЕ">Октябрь< /ОРТТОМ> 
<ОРТТОМ поу">Ноябрь</ОРТТОМ> 
<ОРТТОМ 'Чес">Декабрь</ОРТТОМ> 

</5ЕГЕСТ> 

<ЅЕГЕСТ пале=“уеак" віге="1"> 

1960">1960</ОРТТОМ> 


<ОРТТОМ уа1џе="1961">1961</ОРТІОМ> 
-. промежуточные пункты списка ... 
2004">2004</ОРТТОМ> 


<тр а1ідп="гідће" уа1іс̧п="сор"> Ваш адрес: </ТО> 
<ТО><ТЕХТАВЕА со15="30" комз="5" папе="аддгеѕв">Введите ваш адрес с ин- 
дексом. </ТЕХТАКЕА></Тр> 
</тв> 
<ТВ> 
<ТО а119п="сепеег" со1ѕрап="2"> 
<ТМРОТ буре="геѕес" папе="геѕес" уа1ие="Очистить"> 
&прзр; &прѕр; 
<ІМРОТ суре="зџртіс" пате=" зуртіс" уа1џе= "Зарегистрироваться"></Тр> 
</ТВ> 
</ТАВЬЕ> 
</ЕОВМ> 


Такая форма будет выглядеть аналогично при просмотре в основных браузерах — ее 
вид для браузера Іпіегпеї Ехріогег 6.0 показан на рис. 5.14. 


Заполните регистрационную форму: 


Имя 


Фамилия 


Повтор пароля: 
Дата рождения [1 2] [Янеорь ж) [1950 5] 
Ваш адрес: Введите Ваш өдрес с индексом 2 


Очистить | __ Зврегистрироваться | 


Рис. 5.14. Внешний вид полученной регистраци- 
онной формы в браузере тете! Ехрогег 6.0 


Надеюсь, что в этом примере все оказалось понятным. Если значение каких-либо ат- 
рибутов не ясно или забылось — обратитесь к соответствующему разделу выше и уточни- 
те его назначение в итоговой таблице. 
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Перевод фокуса ввода на элемент 


В НТМІ. -документе, чтобы выполнить свои задачи, элемент интерфейса должен быть 
активизирован пользователем, т.е. он должен получить фокус ввода. Например, пользо- 
ватели должны щелкнуть на ссылке, задаваемой элементом А, чтобы перейти к другому 
документу. Точно так же пользователи должны перевести фокус ввода на элемент 
ТЕХТАБЕА или ТЕХТ, чтобы в него можно было вводить и редактировать текст. 

Имеется несколько способов передачи фокуса элементу управления в форме. 


1. Указать на элемент с помощью мыши. 

2. Перейти с одного элемента на другой с помошью клавиатуры. (Для документа. 
можно определить последовательность обхода, определяющую порядок получения 
фокуса ввода элементами формы при перемещении его по документу с помошью 
клавиатуры, т.е. нажатием клавиши <ТаБ>.) 

3. Можно выбрать элемент с помощью клавиши быстрого доступа (иногда их назы- 
вают “клавиатурным сокращением” или “горячей клавишей"). 


Указание атрибута скаріпаех=" питЬех" внутри элементов формы, которые нужно акти- 
визировать перед использованием, определяет положение элемента в последовательности пе- 
рехода для текушего документа. Значение литЬег должно лежать в диапазоне от 0 до 32 767. 
Браузеры пользователей должны игнорировать начальные нули в записи числа. 

Последовательность обхода определяет порядок получения фокуса ввода элементами 
при перемешении его с помощью клавиатуры. Последовательность обхода определяется 
несколькими правилами. 


1. Если ни в одном из элементов в документе не задан атрибут баріпаех, то обход 
элементов будет осуществляться в порядке их описания в НТМ!-документе. 

2. Переход к элементам, имеющим атрибут саріпаӣех с положительным значением 
(не нуль), должен осуществляться в первую очередь. 

3. Переход всегда выполняется от элемента с меньшим значением атрибута саріпдех 
к элементу с высшим значением, начиная от самого меньшего и заканчивая самым 
большим. Значения не обязательно должны быть последовательными, т.е. некото- 
рые значения могут быть пропушены. 

4. Переход к элементам с одинаковыми значениями атрибута баріпдех должен 
осушествляться в порядке их описания в НТМІ -коде. 

5. Переход к элементам, не имеющим атрибута саріпадех или у которых значением 
этого атрибута является “0”, выполняется в последнюю очередь, причем в порядке 
их нахождения в потоке символов. 

6. Элементы с атрибутом діѕар1еа не участвуют в последовательности обхода. 


7. По завершении полного цикла обход начинается вновь с первого элемента. 


Приведем список элементов, которые поддерживают атрибут сађіпдех: А, ВОТТОМ, 
ТМРОТ, ОВЈЕСТ, ЅЕГЕСТ и ТЕХТАВЕА. 

Следует отметить, что “ломать” стандартную последовательность перехода следует 
лишь в тех случаях, когла у вас есть для этого веские основания. Современный пользова- 
тель настолько привык пользоваться мышью, что ваш труд по обдумыванию и описанию 
новой последовательности перехода вряд ли будет оценен. 


118 Часть. НТМІ. 


Сценарии 


Странице, созданной на языке НТМ!, можно добавить динамичности при помощи 
сценариев. Сценарий — это небольшая программа, написанная на специальном языке 
программирования. Сценарии могут сопровождать НТМ!--документ, т.е. подгружаться 
кнему по мере необходимости из отдельного файла, или могут быть внедрены в НТМІ.- 
документ. Такие сценарии называются клиентскими, поскольку выполняются на машине 
пользователя, — в отличие от сценариев, которые работают на сервере, например, для 
обработки данных Меь-форм. Клиентские сценарии выполняются на компьютере поль- 
зователя после загрузки файла или в другое время, — например, когда происходит щел- 
чок кнопкой мышки на определенной кнопке (событие). 

Сценарии предоставляют создателям Меб-страниц дополнительные возможности, 


е Организация выполнения сценария еще в процессе загрузки документа с целью 
динамического изменения содержимого документа. 

• Использование сценариев в формах для обработки вводимых данных с целью про- 
верки, попадают ли введенные данные в допустимый диапазон значений, запол- 
нены ли обязательные поля и так далее, еще до того, как данные будут переданы на 
сервер. В случае неправильного ввода (например, в адресе е-тай нет символа @) 
на экран можно вывести сообщение об ошибке и удержать пользователя от от- 
правки на сервер заведомо неверной информации. 

• Выполнение сценариев при возникновении определенных событий, оказывающих 
влияние на документ, — таких как загрузка документа, закрытие документа, щелчок 
кнопкой мыши, установка фокуса ввода на каком-либо элементе и др. В результате 
НТМІ -страница получает возможность реагировать на действия пользователей. 


Сценарии могут выполняться один раз (например, при загрузке или закрытии доку- 
мента), а могут каждый раз, когда возникает некоторое событие. В последнем случае вы- 
зов сценария осушествляется из элемента, к которому относится данное событие, для 
чего в качестве атрибута данного элемента указывается имя события, а в качестве значе- 
ния этого атрибута — сценарий. Вот пример описания кнопки с произвольным действи- 
ем, когда при щелчке мышью на кнопке будет вызван сценарий зепадака () : 


<ТМРОТ опс1іск="ѕепддаба()" буре="Ьџссоп" паме=“ЬиЕ" уа1џе="Кнопка" > 


В принципе любое допустимое в НТМІ. событие вызывается действием пользователя. 
Втабл. 5.7 приведены основные события, которые могут отслеживаться в НТМІ. -документе. 


Таблица 5.7. События НТМЕ 

Событие Описание 

оп1оаа Браузер пользователя заканчивает загружать окно или все фреймы элемента 
ЕВАМЕЗЕТ. Этот атрибут может использоваться в элементах Вору и ЕВАМЕЗЕТ 

опип1оаа Браузер пользователя удаляет документ из окна или фрейма. Этот атрибут мо- 
жет использоваться в элементах Вор и ЕЕАМЕЗЕТ 

опс1іск При однократном щелчке левой кнопкой мыши на элементе. Этот атрибут может 


использоваться с большинством элементов. 


опар1с1іск При двойном щелчке левой кнопкой мыши на элементе. Этот атрибут может ис- 
пользоваться с большинством элементов 


оплоцџѕедоэп При щелчке левой кнопкой мыши на элементе (до того, как кнопку отпустили). 
Этот атрибут может использоваться с большинством элементов 


оппоцѕецр При отпускании левой кнопки мыши. Этот атрибут может использоваться 
с большинством элементов. 


Глава 5. Формы 119 


Окончание табл. 5.7 
Событие Описание 


оптоизеоуег При перемещении указателя мыши на элемент. Этот атрибут может использо- 
ваться с большинством элементов 


оплоцѕепоуе При перемещении указателя мыши в пределах изображения элемента. Этот ат- 
рибут может использоваться с большинством элементов 


оппочзеоцЕ При перемещении указателя мыши за пределы элемента. Этот атрибут может 
использоваться с большинством элементов. 


опЁосив При получении элементом фокуса ввода с помощью указателя мыши или в после- 
довательности обхода путем нажатия клавиши <ТаБ>. Этот атрибут может исполь- 
зоваться со следующими элементами: ТМРОТ, ЗЕБЕСТ, ТЕХТАКЕА и ВОТТОМ 


опрішг При передаче фокуса ввода с этого элемента на другой с помощью указателя 
мыши или в последовательности обхода посредством нажатия клавиши <ТаБ>. 
Оно может использоваться с теми же элементами, что и событие опѓосц= 


опкеургеѕѕ При нажатии и отпускании клавиши клавиатуры, когда фокус ввода находится на 
данном элементе. Этот атрибут может использоваться с большинством элементов 


опкеудомт При нажатии клавиши клавиатуры, когда фокус ввода находится на данном эле- 
менте (до того, как ее отпустили). Этот атрибут может использоваться с боль- 
шинством элементов 


опкеуџр При отпускании клавиши клавиатуры, когда фокус ввода находится на данном 
элементе. Этот атрибут может использоваться с большинством элементов 

опзоЬті Е При отправке формы. Оно используется только в элементе РОВМ 

опгеѕеб При сбросе полей формы. Используется только в элементе РОВМ 

опве1есе При выделении пользователем некоторого текста в текстовом поле. Этот атри- 
бут может использоваться с элементами тМРОТ и ТЕХТАВЕА 

опсћапде При потере управляющим элементом фокуса ввода, если его содержимое было 


изменено с момента получения фокуса. Этот атрибут используется с элемента- 
МИ ТМРОТ, ЗЕЕСТ И ТЕХТАВЕА 


Элемент ЅСВІРТ 


Для внедрения сценариев в НТМЕ-документ используется элемент 5СВТРТ. Мы о 
нем уже упоминали в разделе “Формы”, когда создавали кнопку с произвольным дейст- 
вием. Элемент ЗСВТРТ может быть расположен в НТМІ -документе в разделах НЕАр или 
ВОРУ и повторяться сколько угодно. 

Поскольку язык НТМІ. не позволяет создавать программный код, сценарии пишутся 
на специальных языках программирования, и поэтому браузеру необходимо указать, на 
каком именно языке написан кажлый сценарий. Элементов на Меб-странице может быть 
несколько, и сценарии в них могут быть написаны на разных языках. 

При создании МеБ-страниц со сценариями можно указать язык сценария по умолчанию 
для всех сценариев в документе, включив слелующее объявление МЕТА в элемент НЕАР: 
<МЕТА ҺЕЕр-едоіу= "Сопсепе-5сгіре-Туре" сопсепе=" буре" > 


Здесь " суре" — МІМЕ-тип содержимого, определяющий, на каком языке написан 
сценарий. Примерами значений являются "кехЕ/Ес1", " сехе/јауаѕсгірс" и "сехе/ 
урѕсгіре". 

Язык сценария можно также задавать или переопределять (т.е. менять значение, ко- 
торое использовалось по умолчанию) непосредственно в элементе ЗСВІРТ при помощи 
атрибута буре. В качестве значения атрибута буре также используются МІМЕ-типы. 
Если значение по умолчанию для языка сценариев не задано, то в каждом элементе обя- 
зательно должен задаваться атрибут суре. 
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Код сценария может располагаться прямо в НТМ!-документе между открывающим 
изакрывающим тегами <5СВТРТ></5СВТРТ> или во внешнем файле. Тогда код можно не 
дублировать в документе, а подключить его напрямую из файла. Для этого в элементе ЗСВТРТ 
следует задать атрибут ѕгс, в качестве значения которого указывается ОКІ файла сценария. 

Рассмотрим пример документа, где по умолчанию задается использование языка сце- 
нариев ТСІ. — Міте-тип "ЕехЕ/Ес!1", а затем при помощи элемента ЗСВТРТ добавля- 
ются два сценария. Первый написан на языке УВ$спр! и подгружается из внешнего фай- 
ла, причем этот файл нахолится в папке зск1ре /урса1с. Код второго сценария на язы- 
ке Лауа5спр! приводится непосредственно в НТМЕ--документе. 


Пример 5.9 


<!ОСТУРЕ НТМІ, РИВЫТС "-//ИЗС//ОТЬ НТМ 4.0//ЕМ" "Һсср: //ммм.м3 .оха/ТВ/ВЕС- 
0п140/5=гісе.аса"> 
<НТМІ> 
<НЕАр> 
<ТТТЬЕ>Документ со сценариями</ТІТЦЕ> 
<МЕТА ҺЕБр-едиіу= "Сопсепе-Ѕсүірс-Туре" сопбепь="бехі/ес1"> 
<5СВІРТ буре="сехе/уБвсгіре" вхс="вск1рЕ/УЬса1с"> 
= вызывается Сценарий из внешнего файла... 
</5СВІРТ> 
</НЕАр> 
<ворү> 
<6СВІРТ буре="сехе/јауавсгіре"> 
...код сценария на языке Зауабсе1ре... 
</ЗСВТРТ> 
</воБу> 
</нтмь> 


Как скрыть код сценария от браузера 


Чтобы скрыть код сценария от отображения в окне не поддерживающих элемент 
5СВТРТ браузеров, которые могут расценить этот код как обычный текст и вывести его 
на страницу, можно хранить сценарии во внешних файлах и подключать их к документу 
при помощи атрибута вес. Есть и другой способ — закомментировать код сценария, то- 
гла НТМІ. его не поймет, а ядро сценария все равно найдет его в коде и выполнит. 

В том случае, когда сценарий пишется на языке ]ауа$сйри, перед его началом ставится 
последовательность <!--, означающая в языке НТМЕ. начало комментария, — т.е. все, 
что илет дальше, игнорируется интерпретатором НТМЕ. Последняя строка кода начина- 
ется символами / /, означающими комментарий в Лауа$спри, и заканчивается последова- 
тельностью --> — конец комментария НТМЕ.. Это необходимо, чтобы строка --> не 
разбиралась синтаксическим анализатором Јауа$сгірї. 
<ЗСВТРТ суре="кехЕ/Зауавск1ре"> 

<!-- скрыть содержимое сценария от старых браузеров 
- код сценария на ЈауаЅсгіре 


// конец скрытого содержимого --> 
</5СВТРТ> 


При таком написании старый браузер, не поддерживающий элемент ЅСКІРТ, проиг- 
норирует его и все его содержимое. 

В языке УВЅсгірі комментарием считается весь текст, начиная с символа одинарной 
кавычки и далее до конца строки. Это может использоваться для комментирования стро- 
ки --> от интерпретатора языка УВ$спри. Поэтому для языка УВсгір аналогичная пре- 
дыдущему примеру запись лолжна выглядеть так: 
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<ЗСВТРТ куре="кехЕ/\Ьзскаре"> 

<!-- скрыть содержимое сценария от старых браузеров 
код сценария на УВЗСЕШРЕ = 

конец скрытого содержимого --> 

</8СВІРТ> 


В языке Тс! комментарием считается текст от символа # до конца строки: 


<ЗСВТРТ куре="сехе/ес1"> 

<!-- скрыть содержимое сценария от старых браузеров 
_ код сценария на Тс1 -- 

# конец скрытого содержимого --> 

</ЗСВТРТ> 


Итоги по элементу 5СВТРТ подведены в табл. 5.8. 


Таблица 5.8. Атрибуты элемента <ЅСВІРТ> 
Атрибут Описание Пример 


суре Определяет язык сценария и имеет приоритет над язы- буре=" сех /урзсгіре" 
ком, заданным по умолчанию в элементе МЕТА; значе- 
ние — МІМЕ-тип 


ах Определяет местоположение подключаемого вешнего ѕгс="=сгіре/урса1с” 
сценария; значение — ОРІ. сценария 
1апозаде Задает язык сценария по именному идентификатору. 
Так как эти имена не стандартизированы, атрибут поме- 
чен как нежелательный, и вместо него лучше пользо- 
ваться атрибутом суре 
деѓег Булев атрибут. Если он установлен, то браузер понимает, деѓег 
что сценарий не изменяет содержимое страницы, и спо- 
койно продолжает обрабатывать код страницы дальше 


Динамическое изменение документа 


Сценарии, выполняющиеся при загрузке НТМІ -документа, могут менять или фор- 
мировать его содержимое. Приведем простой пример, как с помощью сценария на языке 
ЈауаЅсгірі можно сформировать содержимое документа: 
<5СВІРТ буре="Сехұ/јамаѕсгір"> 

досилепс -мтісе("<Н1 а1ісп="сепсег">Сценарий сформировал документ! <\/Н1>") 
</ЗСВТРТ> 

В документ при этом вставляется строка кода, указанная в круглых скобках. После 
работы этого сценария получим тот же эффект, что и при создании вот такой разметки на 
языке НТМІ: 


<Н1 а1ісп="сепсег">Сценарий сформировал документ! </Н1> 


Содержимое документа при этом формируется в той последовательности, в которой в 
коде встречаются элементы 5СЕТРТ. 


Элемент МОЅСНВІРТ 


Рассматриваемый элемент служит для размещения альтернативного содержимого в том 
случае, если браузер пользователя не поддерживает сценарии или используемого языка 
сценария. 
<МОЅСВІРТ> 
Для того что бы оценить все возможности этой Иер-страницы, Вам нужен браузер, 


поддерживающий язык ЈауаЅсгірё. 
</МОЅСКІРТ> 
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Глава 6 


Фреймы 


В этой главе... 


> Понятие фрейма 

> Создание структуры фреймов — элемент ЕКАМЕЅЕТ 
> Загрузка ссылок во фреймы 

> Преимущества и недостатки фреймов 

> Пример — фотоальбом 


Понятие фрейма 


Окно браузера может быть разделено на части, которые называются фреймами, иногда 
кадрами; можно их назвать и подокнами. В каждую такую часть окна браузера, т.е. фрейм, 
может быть загружен отдельный НТМ!-документ. Рассмотрим пример окна браузера 
с тремя фреймами (рис. 6.1). 


Гон ой тт ан А 
Ми Еб Мен Рамсеов Тов нер 


Е О Я 00 нн утаан 0: 305 0] Ш Ш 
ТТТ] 
ыы 8) омана Ф] ненна ми Мда ада 


Е Фрейм №2 


ќгате2.Һті 


1 


Фгате1 Ви 


Фрей 


Фрейм №5 


(глше3. Ви 


Рис. 6.1. Окно браузера разделено на три фрейма 


В каждый фрейм в этом случае для наглядности загружен простой НТМТ-документ, 
сообщающий номер фрейма и название файла, хранящего его содержимое. Если в фрейм 
‘будет загружен реальный документ, который не помещается полностью в нем, то у фрей- 
ма (внимание, не у всего окна!) появятся вертикальная и/или горизонтальная полосы 


прокрутки в зависимости от того, по горизонтали и/или по вертикали не помещается со- 
держимое документа. 

Например, дизайн и структура вашего сайта таковы, что есть одинаковые элементы, по- 
вторяющиеся на каждой странице сайта: название, навигационное меню, адрес в конце стра- 
ницы или какие-то иные подобные элементы. Изменяется только содержание разделов. Тогда 
страницы можно разбить на части таким образом, чтобы неизменяемые части были помеще- 
ны в отдельные фреймы, а еще один фрейм выделить для того, чтобы в него загружалось со- 
держимое нужного раздела после щелчка на соответствующей ссылке, например, из меню. 
Это дает экономию в скорости загрузки, так как одинаковые части страниц сайта повторно не 
загружаются, а просто все время отображаются в отведенных им фреймах. 


Создание структуры фреймов — элемент ЕВАМЕЗЕТ 


Структура разбивки окна хранится в отдельном НТМІ.-документе, он-то и называет- 
ся документом с фреймами. Структура фреймов формируется при помощи специального 
элемента ЕКАМЕЅЕТ. Обычный документ имеет один раздел НЕАР и один раздел вору, 
тогда как в документе с фреймами раздел ВОБУ заменяется описанием структуры фрей- 
мов, т.е. разделом ЕКАМЕЅЕТ. 

В раздел ЕКАМЕЅЕТ может быть добавлен элемент МОРВАМЕ с альтернативным содер- 
жанием для отображения в браузерах, не поддерживающих фреймы, или в браузерах с от- 
ключенной поддержкой фреймов. Такие браузеры просто не поймут структуры 
ЕВАМЕСЕТ и МОҒКАМЕ, а отобразят помещенный внутри них текст. 


Пример 6.1 


<НтМІ> 
<НЕАО> 

<ТТТЬЕ>Простой документ с фреймами</ТІТІЕ> 
</НЕАр> 
<РВАМЕЗЕТ > 

„описание структуры фреймов .. 

<МОРКАМЕЗ> 
Альтернативное содержание для браузеров, не поддерживающих фреймы 

< /МОЕВАМЕЅ> 
</ЕВАМЕЗЕТ> 
</нтмь> 

Обратите внимание, что раздел Вору в локументе отсутствует полностью, а элемент 
МОЕКАМЕЅ содержится внутри раздела ЕКАМЕЅЕТ. 

Сама структура фреймов формируется лелением окна браузера на части — строки и колон- 
ки; в какой-то степени это похоже не создание таблиц. Для этого у элемента ЕВАМЕЗЕТ суще- 
ствуют атрибуты со1з и гом, задающие деление на колонки и строки соответственно. 

Единицы измерения, в которых можно задавать размеры фреймов, это, как обычно, 
пиксели и проценты. Есть еще возможность задавать размер в новой пока для нас едини- 
це измерения, которую условно можно назвать “часть” окна. Значения атрибутов со1в 
и гомѕ задаются перечислением размеров соответствующих областей через запятую. 
Можно комбинировать разные способы задания. Рассмотрим несколько примеров, исхо- 
дя из предположения, что размер окна браузера 800х600 пикселей. 


Пример 6.2 


<РВАМЕБЕТ гоив="50%, 50%"> 
...продолжение определения структуры фреймов... 
</ЕВАМЕЗЕТ> 
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Такой код поделит окно по горизонтали на два одинаковых по высоте фрейма 
(строки). Если задать атрибут со15="50%, 50%", то получим две одинаковые по шири- 
не колонки. 


Пример 6.3 


<РВАМЕЗЕТ со15="120, 400, **> 
...продолжение определения структуры фреймов. 
</ЕВАМЕЗЕТ> 

При таком коде получим три колонки фреймов: левая шириной 120 пикселей, сред- 
няя — шириной 400 пикселей, а на третью колонку отводится все, что останется от пер- 
вых двух колонок, — в атрибуте это значение обозначается символом звездочки “*”. 


Пример 6.4 


<ЕКАМЕЅЕТ со1в="1*, 4*"> 
...продолжение определения структуры фреймов... 
</РВАМЕЗЕТ> 

Такой код создаст две колонки фреймов. Ширина первой принимается за единицу (это 
обозначается как 1* или просто *), ширина второй в четыре раза больше. Таким образом, 
‘ширина первой будет 20%, а ширина второй — 80% от общей ширины окна браузера. 


Пример 6.5 


<ЕЋАМЕЅЕТ со15="100, 40%, *"> 
...продолжение определения структуры фреймов... 
</ЕВАМЕЗЕТ> 

В примере 6.5 комбинируются все три способа задания размеров. Ширина первой колонки 
будет равна 100 пикселей, для второй отводится 40% оставшейся ширины (800 — 100 = 700), 
ина третью остается все, что не занято первой и второй колонками. 

Раздел ЕВАМЕЗЕТ может содержать вложенные разделы ЕВАМЕЗЕТ, что позволяет создать 
довольно сложную структуру фреймов. Допустим, нам надо разделить окно на 4 фрейма сле- 
дующим образом: 


1. Ширина 100 рх 2. Высота: 80 рх 


|роизвольная высота ( 


4. Высота: 30 рх 


Сначала необходимо организовать 2 колонки таким образом: со15="100,* ". Затем 
вторую колонку поделить на три строки таким образом: комз="80, *, 30". 

Отдельный фрейм, точнее его описание, задается элементом ЕКАМЕ и его атрибутами; 
подробнее о нем чуть позже. Вернемся к вложенным элементам ЕВАМЕЗЕТ. Рассмотрим 
пример кода, создающего такую структуру фреймов: 


<РВАМЕЗЕТ со15=*100,* "> 
Егате1" эгс="Егате1 „Вет "> 


Ғгате2.Һот1 "> 
ҒгатеЗ.Һіт1"> 
Ғгале4.Һт1"> 
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Каким образом разбивается окно на фреймы, вроде бы разобрались. При создании 
фреймов можно сделать так, чтобы границы между фреймами видно не было. Как вы, 
наверное, уже догадались, делается это при помощи атрибута Бох4ех — его значение 
должно равняться нулю. Но дело в том, что для фреймов этот атрибут не воспринимается 
браузером Ииегпе! Ехріогег, зато поддерживается браузером Ме!зсаре Мамва‘ог. Для т- 
легпег Ехріогег граница между фреймами задается атрибутом Ехатефогаег, который не 
поддерживается браузером Меїѕсаре М№ауіваќог. Получается, что необходимо задавать 
одинаковые значения для обоих атрибутов, чтобы оба браузера восприняли НТМ!-код 
одинаково и толщина границ между фреймами была одинаковой. 

Толщину границ или, по-другому, расстояние между фреймами также можно регули- 
ровать атрибутом Егамезрас1 пс, значение которого задается в пикселях. 

Все атрибуты элемента ЕКАМЕЗЕТ приведены в табл. 6.1. 


Таблица 6.1. Атрибуты элемента <ЕНАМЕ$ЕТ> 
Атрибут Описание Пример 


гомв Определяет количество и размеры горизонтальных фрей- гоив= "25%, 25%, ** 
мов (фреймов-строк) в окне браузера. В качестве значе- 
ния задается список размеров фреймов через запятую. 
Способы задания размеров: а) в процентах от высоты ра- 
бочей области окна браузера — например: 
"30%, 30%, 40%"; б) в виде знака " * * (звездочка), говоря- 
щего о том, что фрейм занимает все свободное простран- 
ство окна браузера, незанятое другими фреймами с явно 
указанными размерами — например, звездочка в записи 
"25%,25%, ** равносильна 50%; в) в пикселях — напри- 

: "75, **. Все три способа можно совмещать 


со18 Определяет количество и размеры вертикальных фреймов со1=="265, *" 
(фреймов-столбцов) в окне браузера. В качестве значения 
задается список размеров фреймов через запятую. Разме- 
ры задаются так же, как и в предыдущем параметре коис 


Богдег Определяет ширину рамок фреймов в пикселях. Данный Вогдег= "0" 
параметр действует только в браузерах М№еіѕсаре 
ЕгапеБогдег Данный параметр действует только в браузерах \егпе! ЕгатеБогдег="0" 


Ехріогеги определяет наличие рамок у содержащихся внут- 
ри элемента ЕВАМЕЗЕТ фреймов. Возможные значения: 
Уез — отображать рамки; № или 0 — не отображать рамки. 
Браузеры Меїѕсаре не поддерживают данный параметр в 
полной мере и для глобального определения ширины ра- 
мок используют параметр вокоек 


Екатезрас1ля Определяет расстояние (так называемую “серую об- Екатеврас1т9="0" 
ласть") между фреймами в пикселях. Данный параметр 
также необходим для создания фреймов без рамок 


Теперь вернемся к элементу ЕКАМЕ, который описывает отдельный фрейм внутри 
всей структуры. Обязательный параметр для него — атрибут экс, который задает ОКІ. 
НТМЕ-документа или изображения для отображения в этом фрейме. Также лучше задать 
фрейму имя при помощи атрибута пате. Это позволит использовать данное имя в каче- 
стве значения атрибута ЕагаеЕ элемента А и управлять тем, в какой фрейм должна за- 
гружаться ссылка. Имена фреймов не могут начинаться с цифр, в качестве начальных 
символов допустимы только буквы латинского алфавита (а-2, А-2)). 
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Когда в структуре фреймов не задана рамка между фреймами, их содержимое может 
слишком плотно примыкать друг к другу, что будет не очень красиво выглядеть. Если хоти- 
те раздвинуть содержимое фреймов и при этом все-таки не включать отображение границ 
между ними, то это можно сделать, задав внутри фреймов отступы. Размер этих отступов 
задается в пикселях и попарно: для отступов сверху и снизу атрибутом таготинезлове ‚ 
адля отступов справа и слева — атрибутом пага1им ЧЕН. Тогда расстояние между содер- 
жимым соседних фреймов будет равно сумме соответствующих отступов этих фреймов. 

Должна ли отображаться рамка вокруг отдельного фрейма, определяется его атрибу- 
том Егатефогаег. Значение уез (или 1) говорит о том, что рамка должна быть, значе- 
ние по (или 0) указывает, что рамки быть не должно. Этот атрибут браузером М№еіѕсаре 
Мауіваїог не поддерживается, поэтому в нем можно задать наличие рамки (или ее отсут- 
ствие) только для всех фреймов сразу при помощи атрибута рогдег элемента ЕКАМЕЅЕТ. 

Пользователь может изменять размер фреймов, созданный НТМІ -документом. Для 
этого достаточно подвести курсор мыши к границе фреймов (неважно. видны эти грани- 
цы или нет) и стандартным для операционной системы способом изменить размер окна. 
В Міпаоуѕ курсор мыши примет вид двунаправленной черной стрелки. Нажав левую 
кнопку мыши, можно передвинуть границу окна. Аналогично можно изменить и размер 
фрейма, поскольку фрейм — это тоже окно. Если вы рассчитали размеры своих фреймов 
и не хотите, чтобы пользователь менял их, задайте булев атрибут погез1 хе. В результате 
изменение размеров будет запрещено. 

Как мы уже говорили ранее, полосы прокрутки у фрейма появляются в том случае, если 
его содержимое в заданных его границах полностью не помещается. Наличие полос про- 
крутки регулируется атрибутом зско114па. Допустимы три значения уез, по и амко. 

Значение ацсо соответствует автоматическому появлению полос прокрутки в тех случа- 
ях, когда это действительно необходимо. Если содержимое видно и так, полос прокрутки 
нет, если часть содержимого не помещается — появляется нужная полоса прокрутки. 

Значение уеѕ включает обе полосы прокрутки — независимо от того, нужны они или 
нет. Иногда это может выглядеть не очень красиво. 

Значение по запрещает показывать полосы прокрутки совсем. Будьте осторожны с 
этим значением, поскольку при его указании можете лишить пользователя возможности 
увидеть все содержимое фрейма, когда оно не помещается в нем полностью. Все атрибу- 
ты элемента ЕВАМЕ приведены в табл. 6.2. 


Таблица 6.2. Атрибуты элемента <ҒВАМЕ> 


Атрибут Описание Пример 

згс Обязательный параметр. Указывает адрес (ОАЦ) НТМІ- =гс="Єгате2 вета" 
файла, отображаемого в данном фрейме 

папе Определяет имя данного фрейма, которое будет в даль- пате=*тепи1" 


нейшем использоваться для ссылки на него из других до- 
кументов с помощью атрибута сагаее (см. элемент А). 

В качестве значения нужно указать любое имя без пробе- 
лов с использованием латинских символов и цифр 
(начальными символами могут быть только буквы латин- 
ского алфавита: а-2, А-2). Имя не должно начинаться с 
цифр и специальных символов. Зарезервированные име- 
на фреймов начинаются со знака подчеркивания 


пако4пм1аей Определяет ширину (в пикселях) левого и правого полей махазиизаев="о" 


фрейма. Если параметр не указан, браузер самостоя- 
тельно определит оптимальный размер отступа 
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Атрибут Описание 


тагдіпһеідһе Определяет ширину (в пикселях) верхнего и нижнего по- 
лей фрейма. Если параметр не указан, браузер самостоя- 
тельно определит оптимальный размер отступа 


Бсго11іпа Определяет наличие полос прокрутки содержимого Бсго11іпд="аџсо" 
фрейма. Возможные значения: 


уе — отображать полосы прокрутки; 
по — не отображать полосы прокрутки; 


ацсо — отображать полосы прокрутки при необходимо- 
сти (если документ, указанный в параметре 5кс, не уме- 
щается во фрейме) 


погеѕіте Не позволяет изменять размеры фрейма. Данный пара- погеѕіге 
метр является флагом и не требует указания значения 


#гапеБогдег Определяетналичие рамоку фрейма. Возможные значения: Ёгапеђогдег="0" 
уев или 1 — отображать рамки; 
по или 0 — не отображать рамки. 


Браузеры Ме!зсаре не поддерживают данный параметр в 
полной мере и для глобального определения ширины ра- 
мок используют атрибут Богдег элемента ЕВАМЕЗЕТ 


Загрузка ссылок во фреймы 


Рассмотрим на примере, как работаст в случае использования фреймов атрибут сах- 
её элемента А. Представим, что мы хотим создать собственную домашнюю страничку и 
у нас есть НТМГ-документ, описывающий структуру с тремя фреймами. 


<РВАМЕЗЕТ ЕгапеБохаег="0" Богаег="0" Ғгапеврасіпа="0" со15="150,*" 
<ЕВАМЕ эгс="тепи.Век]" пате="щепи” всго!14п9="ацео” погезізе> 
<ЕВАМЕЗЕТ ВОИЗ="100, *"> 
<РВАМЕ вгс=*біЄ1е.Һет1" паще= 
погезіе> 

<ЕВАМЕ вгс="ароцёте.Һет" паме="сопеепЕ" пагаіпмідећ="0" вско113п9=“ацЕо" 
погез12е> 

</РВАМЕЗЕТ> 

<МОРВАМЕЗ> Ваш браузер не поддерживает фреймы. Вы можете просмотреть версию 
сайта <А ҺгеҒ="поЁгапеѕ.Һт1">без фреймов</А></МОҒВАМЕЅ> 

</ЕВАМЕЗЕТ> 


Е1Е1е" пагдігміасћ= "0" ѕсго11іпа= "ацсо" 


Добавьте необходимые элементы, чтобы получился корректный НТМІ -документ, и со- 
храните его с именем, например, Егамез .Һіт1, в отдельной папке с именем Нотераде 
внутри папки НТМг, с которой мы работали до сих пор. Попробуем в ней создать мини- 
мальный набор МеБ-страниц, которые образуют наш первый маленький сайт с фреймами. 

Приведенный выше код сформирует в окне браузера структуру, состоящую из трех 
фреймов, аналогичную приведенной на рис. 6.2. 

Трем фреймам в НТМ!-коде заданы имена: тепи, ЕЗЕ1е и сопсепе соответственно. 
В первый фрейм с именем тепи загружается НТМГ-документ тепи . поті. Допустим, что 
его содержание — это список разделов нашего сайта. С каждого названия раздела должна 
быть установлена ссылка на НТМІ-документ, в котором хранится его содержимое. Содер- 
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жимое разделов сайта должно отображаться в третьем фрейме с именем сопсепЕ. Второй 
фрейм Е 1 с1е будет содержать просто название сайта; информация в нем меняться не будет. 


не Ба Мем Ракета Һер 
ЕЭ ПЕ аА ВЕЛЕ 1 | 
| главен | е ема бопсалап во 10е 
| а есть 8) неет С] едо д ндн мыд 
Фрейм № Фрейм 
бане їгате2.Һеті 
Фрейм №3 
Ятатез. т! 
абы 2 Біне 


Рис. 6.2. Структура из трех фреймов 


Чтобы создать список разделов сайта, вспомним, как создаются в НТМІ. ненумеро- 
ванные списки и ссылки. Для примера неважно, какие названия будут у разделов. Вы 
можете придумать свои, а я остановлюсь на таких: 
<> 
<ТТ><А ҺгеЁғ="ароцёте.Һет1" >Обо мне</А> 
грһосов . Һет ">Фотоальбом</А> 
БОБЫ „Һет ">Увлечения</А> 
спеѕеБоок. Һет] ">Гостевая книга</А> 


При создании документа тепи.Һстм1 не забудьте об обязательных элементах НТМІ. 
и декларации типа документа. Задайте на свое усмотрение цвет фона документа и цвета 
для текста и ссылок. Напомню, что делается это в элементе ВОБУ заданием соответст- 
вующих атрибутов. Можете обратиться к таблице атрибутов элемента ВОРУ в главе 2. 

Мы созлали НТМГ-документ, который будет отображаться в первом фрейме с именем 
тепи. Обратите внимание, что атрибут Еагдее лля ссылок пока не задан, поэтому по умол- 
чанию ссылки будут открываться в этом же фрейме, а не в третьем сопеепе, как планиро- 
валось. Чтобы исправить эту ситуацию, зададим значения атрибута сагде! сопёепё". 


Напомним другие значения атрибута сахоеб, которые можно использовать при работе 
с фреймами. Такие ключевые слова начинаются обязательно с символа подчеркивания: 
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е _ве1Е — ссылка загружается в тот же фрейм, из которого ссылаются; 


* _рагепе — документ загружается в непосредственный родительский фрейм 
структуры ЕБАМЕЗЕТ, что эквивалентно значению _зе1 Е, если текущий фрейм не 
имеет родительского фрейма. 


• кор — загружается документ в полное окно (закрывая все остальные фреймы). Это 
значение эквивалентно _ѕе1 Е, если у текущего фрейма нет родительского фрейма. 


Значение _гор при работе с фреймами рекомендуется использовать для ссылок на 
другие сайты, иначе такие ссылки будут загружаться в олин из фреймов, при этом в окне 
браузера останется часть информации от первого сайта, не имеющего к новому сайту ни- 
какого отношения. 

Для отображения во втором фрейме нужно создать документ Е1Е1е. еті с заголов- 
ком сайта. Это может быть изображение или простая надпись. Пусть это будет простой 
заголовок первого уровня. Тогда код НТМІ.-документа булет совсем простым: 
<Н1 а1ідп="сепбег">Страничка Васи Петрова</н1> 


Давайте создадим НТМЕ-документ ароцсте .Һет1 для третьего фрейма, в котором бу- 
дет располагаться информация об авторе сайта, т.е. о вас. Пусть у вас есть фото, которое 
лежит в папке ітасеѕ и называется МуРһоёбо. ра, причем размер фотографии 800х600 
пикселей. Уменьшенная копия фотографии имеет размер 160х120 пикселей и называется 
МуРһосо 5. јро. Кроме того, есть некий фрагмент текста, описывающий вас, — например 
3З абзаца. Фото вставим в самом ‘начале, чтобы посетитель сразу смог представить, на чью 
страничку зашел. Кроме того, вам хочется указать контактную информацию, чтобы же- 
лающие могли с вами связаться. Указывать домашний адрес и телефон не рекомендую, 
вполне достаточно будет адреса е-тай, номера ІСО или другой подобной информации. 
Тогда примерный код такого НТМ!--документа может быть следующим: 
<Н2 а1ідп="гідће">0бо мне</Н2> 


/Зтадез/МуРВоко.)ра" багдес="_ЬЛапк"> 
<1МС ѕгс=". ./іпадез/МуРћһобо =.јра" а1с=*Мое фото" иіаећһ="160" Незове="120" 
Взрасе="5" узрасе="5" Богдег="0" а1іс̧п="1еғс" рібЛе="Щелкни, чтобы посмотреть 
большое фото в новом окне"> 
</А> 
Текст первого параграфа обо мне. 
</в> 
<р> 
Текст второго параграфа обо мне. 
</в> 
<Р> 
Текст третьего параграфа обо мне. 
</в> 


Для создания заголовка страницы мы использовали элемент Н2 — заголовок второго 
‘уровня. Первый уровень заголовков используется у нас для названия всего сайта. 

Наши НТМГ-документы для этого примера мы договорились хранить в отдельной пап- 
ке Нотераде внутри папки НТМІ,. Там же, внутри папки НТМІ,, мы имеем папку 1тадез для 
хранения рисунков, наши фотографии лежат там. Обратите внимание на путь к фотографи- 
ям из документа: ҺгеЁ=". ./1тадез/МуРНого .)ра", т.е. сначала поднимаемся на уро- 
вень выше (. . /) из папки Нотераде в папку НТМГ, потом заходим в папку ітасеѕ, где и 
находим нужные фотографии. 

Напомню, что мини-копия фотографии позволяет ускорить загрузку страницы. 
Мы оформили ссылку с этой мини-копии на оригинальную версию фотографии. 
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Посетители, которых заинтересует фотография, смогут посмотреть ее в отдельном окне 
(Еахдее="_Б1апк"). Чтобы сообщить об этом посетителям сайта, мы использовали атри- 
бут 1 Е1е элемента ІМС, содержимое которого будет отображаться подсказкой при наведе- 
нии указателя мыши на изображение. Если атрибут Е1Е1е не использовать, то в качестве 
подсказки будет использоваться альтернативный текст, заданный атрибутом а1 6. 

Чтобы добавить адрес электронной почты и предоставить пользователю возможность од- 
ним щелчком мыши отправить письмо на этот адрес, используется элемент А и его атрибут 
ВгеЕ. Например, ваш адрес е-тай уаѕуа_ риркіпётаі1 . ги, тогда оформить его можно так: 
<р> 
Обращайтесь ко мне по почте: 


<А птеЕ="та11ео:уазуа_рирк1п@та1 1 .ки?5иЪ]есе=Не11о! ">уаѕуа риркіпётаі1.ко</А> 
</Р> 


Строка таі16о:уаѕуа риркіпётаі1 .го?Ѕирјесі=Не110! означает, что после шелч- 
ка на ссылке необходимо отправить письмо (таі1со) на адрес уаѕуа роиркіпётаі1 . ги. Да- 
лее следует знак вопроса и ключевое слово Ѕорјесе, после знака равно пишется текст, кото- 
рый будет использоваться в качестве темы сообщения (Не11о! в нашем случае). Если ограни- 
читься строкой таі1со:уаѕуа риркіпётаі1.ги и не указать тему сообшения, 
пользователь сможет ввести ее сам. 

После щелчка на такой ссылке система обратится к почтовому клиенту, который ис- 
пользуется на компьютере пользователя. Если почтовых клиентов стоит несколько, то 
обращение будет направлено к тому, который используется по умолчанию. Почтовый 
клиент создаст пустое сообшение, гле в поле Кому булет стоять адрес электронной почты 
уаѕуа риркіпётаі1 . ги, а в поле Тема — фраза не11о!. Остается ввести только тело 
сообщения и отправить его. 


Преимущества и недостатки фреймов 


Пожалуй, главное преимущество НТМІ -страниц, созданных с использованием 
фреймов, заключается в том, что можно сократить количество загружаемой на компью- 
тер пользователя информации. Достигается это разделением информации на статичную, 
которая редко изменяется, например заголовок сайта, навигационное меню и контактная 
информация, и динамичную, которая меняется — как правило, это содержание страниц. 
Примерно так мы и делили информацию в приведенном выше примере по созданию до- 
машней страницы. Но логика создания сайтов при помощи фреймов не столь проста и 
очевидна. Ее довольно трулно понять и очень легко в ней запутаться. Нужно не только 
правильно создать саму структуру фреймов, но и правильно настроить направление за- 
трузки страниц при использовании атрибута ЕакдеЕ элемента А. 

Кроме этого, дополнительные элементы интерфейса, такие как полосы прокруток, 
при использовании фреймов не только добавляют путаницы, но и “крадут” экранное 
пространство. Как известно, Меб-дизайнеры стремятся как можно рациональнее исполь- 
зовать экранное пространство. Страница должна отображаться на экране без горизон- 
тальной полосы прокрутки. На одном экране по возможности должно поместиться ос- 
новное содержимое страницы и обязательно навигационное меню. 

Сушественный недостаток возникает при индексации сайта с фреймами поисковыми 
машинами, так как, по сути, содержание страниц и навигация хранятся в отдельных фай- 
лах. Представьте, что поисковая машина выдала вам как результат поиска нашу страницу 
ароџсте .Һст1. Вот вы ее смотрите и хотите узнать еше что-то об авторе этой страницы, 
например посмотреть фотоальбом. Вы в тупике и шагнуть дальше просто некуда, потому 
что навигации не видно. 


Глава 6. Фреймы 131 


Вдобавок ко всему сказанному выше в старых браузерах неправильно работает нави- 
гация внутри фреймовой структуры. Например, вы долго бродили по разным страницам 
сайта и вдруг захотели вернуться на предыдущую, щелкнув на кнопке Назад в браузере. 
Вместо того чтобы вернуться на действительно последнюю просмотренную страницу, вы 
вернетесь на первую, описывающую структуру всех фреймов. Добро пожаловать, проде- 
лывайте весь свой путь сначала. 

Кроме того, браузеры некоторых пользователей Интернет вовсе не поддерживают 
фреймы. Поэтому вам необходимо в буквальном смысле выполнить двойную работу и 
создать две версии сайта: с фреймами и без них. Поэтому десять раз подумайте, нужны ли 
фреймы, и только при однозначном ответе “да” смело беритесь за дело. 

Справедливости ради хотелось бы заметить, что иногда без фреймов просто не обой- 
тись, — например, когда необходимо наличие на странице логически связанной инфор- 
мации и ее обновление желательно выполнять без перезагрузки всего окна. Примером 
может служить МеБ-чат, создать который без фреймов не представляется возможным. 

Попробуем подытожить: используйте фреймы только тогда, когда это действительно 
необходимо. И делайте это грамотно! 


Пример — фотоальбом 


Чтобы потренироваться, можете самостоятельно создать недостаюшие НТМІ.- 
документы: для фотоальбома, гостевой книги и ваших увлечений. Тут рекоменлую поль- 
зоваться тем же приемом, который мы применяли при добавлении фотографии на стра- 
ницу, т.е. использовать две копии изображения — большую и маленькую. Если фотоаль- 
бом достаточно большой, лучше разделить его по темам и ограничить количество фото- 
графий на одной странице до 10-15, чтобы пользователю не приходилось слишком долго 
ждать загрузки страницы. Если фотографий значительно больше, то снабдите каждую 
странице возможностью перехода на следующую и предыдущие страницы альбома, а 
также возможностью перехода к списку всех альбомов (если их у вас несколько). 

Например, вы решили расположить по 4 мини-копии фотографий в ряд, по три ряда 
на странице. Чтобы расположить фотографии таким образом, можно воспользоваться 
простым приемом — поместить весь этот блок внутрь элемента рту и задать для него вы- 
равнивание по центру. Переводы строк оформить простым элементом ВА. 


Пример 6.6 


<РТУ аІідп="сепбег"> 
<А һгеѓ=". . /іпадеѕ/рһобо1.јро" багдеб="_ЬЛапк"> 
<1М0 ѕго=". . /іпадеѕ/рћһобо_5.јро" а1с="фото на природе" міасћ="160* 
Һеісһе="120" Богаег="0" Е1Е1е=“Щелкни, чтобы посмотреть большое фото в новом 
окне" > 
</А> 
-. еще три такие фотографии .. <ВВ> 
- второй ряд фотографий „<ВЕ> 
= третий ряд фотографий „.<ВВ> 
<А НкеЕ="ргеу.ВЕт1 ">Предыдущая страница</А> &прѕр; | &пзр; 
<А Вгеё="а1ьащ_115.Неп “>Список фотоальбомов</А>&пЬер; | &пЬзр; 
<А һгеЁ="пехС.Һет1 ">Следующая страница</А> 
</0ту> 


Последовательность символов “&прѕр; | &пЬѕр;” разделит каждое словосочетание 
такой послеловательностью “ | “, т.е. символом пробела и вертикальной чертой. Это не 
позволит им слиться в одну послеловательность и визуально разделит их. Имена файлов 
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предыдущей и следующей страниц нужно указать самостоятельно. Можно порекоменло- 
вать такой способ наименований: имя альбома и порядковый номер страницы. Если это 
альбом о походе в лес, страницы можно назвать ЕогезЕ1 .ВЕт1, Еогеѕе2.Һел] и т.д. 
Можно также порекомендовать для всех страниц альбома создать отдельную папку, чтобы 
‘не путать их с другими альбомами. Например, все фотоальбомы вы будете хранить в от- 
дельной папке Рнобоз, внутри которой создадите еще и папки для отдельных альбомов: 
Еогез(, Но1ідауѕ ит.д. Во-первых, вам самим легче будет ориентироваться в папках, во- 
вторых, ОКІ таких страниц будут говорить сами за себя, если вы не пользуетесь фреймами. 
В случае с фреймами в адресной строке браузера все время будет указан адрес первой 
страницы, описывающей саму структуру фреймов. Это, конечно, не очень удобно и может 
дезориентировать пользователя. Если же вы не используете фреймы, то ОКІ. страницы мо- 
жет выглядеть так: 
ВЕЕР: / Лт. тућотераде. ги/рћосоѕ/ Еогеве/ Еогеѕе1 .Һет1 


Думаю, по этому ОКІ. вы сразу догадаетесь, что находитесь на первой странице аль- 
бома Еогезе. Правда, удобно? 
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Навигационные возможности браузеров 


ОТО-определения типов документов 


Пришло время вернуться к декларациям типов документов (Оосителі Туре Рейпйюп, 
ОТР) и рассмотреть их подробнее. Разработчики НТМІ 4.0 тщательно проработали вопрос 
поддержки элементов и атрибутов языка НТМІ., браузерами. В самом начале НТМІ- 
документа должны быть указаны используемая версия и тип языка. Было решено опреде- 
лить три типа поддержки, а значит, и три типа определения: строгое, свободное и фреймо- 
вое. Они определяют, какие элементы и атрибуты могут использоваться в НТМІ- 
документе, а какие нет. 

Спецификация НТМЕ 4.0 требуст, чтобы для МеБ-страницы было задано одно из этих 
определений. Для этого в первую строку описания типа документа включается ОТР. Если 
вы все же предпочтете не задавать ОТО, то имейте в виду, что совместимые с НТМІ 4.0 
браузеры по умолчанию используют строгое определение ОТО. 

Цель строгого определения ОТО — соответствовать последним требованиям верстки, 
т.е. разделять непосредственно разметку и визуальное оформление, не использовать вы- 
ходящих из употребления элементов и атрибутов, помеченных как нежелательные для 
использования. Вместо них следует пользоваться каскалными таблицами стилей. Таким 
‘образом, это наиболее ограничивающее определение ОТО. Если нужно протестировать 
УМеБ-страницу со строгим ОТО, воспользуйтесь следующим описанием типа: 
<!РОСТУРЕ НТМЬ риБ11с "-//ИЗС//РТЮ НТМЬ 4.0//ЕМ" "ВЕЕр://ммм. м3 .ога/ТВ/ВЕС- 
ћет140/50гісе.дєа"> 

Свободное определение ОТО не ограничивает применения элементов или атрибутов. 
В этом определении можно использовать любой выходящий из употребления элемент 
или атрибут. Для проверки МеБ-страницы с таким определением включите в нее сле- 
дующее описание: 


<!РОСТУРЕ НТМЬ рџрііс "-//ИЗС//ртр НТМЬ 4.0 Тгапѕісіопа1/ /ЕМ" 
"ВЕЕР: //имм м3 .оха/ТЕ/ВЕС-ВЕт140/1оозе.аЕа"> 


Фреймовое определение ОТО предназначено для \УМеБ-страниц с фреймами. Эта версия 
поддерживает все структуры, допустимые в свободном определении ОТО, а также структуры, 
необходимые для фреймов. Для указания такого ОТО используйте следующее описание: 


<!РОСТУРЕ НТМЬ роБ1іс "-//МЗС//ОТЬ НТМІ, 4.0 Егамезес//ЕМ" 
*НЕЕр:/ Им. м3 .ога/ТК/КЕС-Һет140/ Егапеѕес.дса"> 


Замечания о таблицах 


В спецификации НТМЕ сделано несколько замечаний о таблицах. Приведем некото- 
рые из них, которые действительно помогут лучше понять сложную табличную модель. 


Логическое обоснование дизайна с помощью таблиц 


Модель таблиц в языке НТМІ. явилась результатом изучения существующих моделей 
таблиц в разных источниках: в распространенных текстовых редакторах, различных тех- 
никах компоновки таблиц в журналах, книгах и других печатных документах. Эта модель 
‘была выбрана так, чтобы как можно проще работать со сложной табличной структурой. 
В частности, это позволяет производить разметку НТМІ -таблиц с помощью текстовых 
редакторов. Так, вы можете сохранить созданную в текстовом редакторе таблицу в виде 
НТМЕ-таблицы. Это поможет сократить время на изучение самого языка НТМИ. и быст- 
ро конвертировать обычные текстовые таблицы в формат НТМІ.. 

Все чаще и чаще люди создают таблицы путем преобразования из документов других 
форматов или создавая их непосредственно в визуальных редакторах. Модель таблиц. 
языка НТМЕ может использоваться в этих средствах разработки. 

Разработчики считали это свойство очень важным для языка НТМІ.. Но мы уже упо- 
минали о том, что вес написанных таким образом НТМЕ-страниц, как правило, превы- 
шает вес страниц, которые были созданы вручную. Но в условиях, когда поджимает вре- 
мя, услугами автоматического конвертирования в формат НТМІ. можно и нужно вос- 
пользоваться. 


Динамическое переформатирование 


К динамическому переформатированию таблиц можно отнести одно из главных 
свойств таблиц — это возможность адаптироваться к изменяющейся ширине экрана в 
пикселях при смене разрешения пользователем. Возможность задавать ширину столбцов 
пропорционально друг лругу и в процентах позволяет верстать универсальные сайты, — 
это так называемый “резиновый” дизайн. 


Последовательное представление 


Для больших таблиц или медленных сетевых соединений очень важно иметь возмож- 
ность последовательного представления таблиц, т.е. отображать часть таблицы до полу- 
чения всех относящихся к ней данных. Ширина окна браузера по умолчанию для боль- 
шинства систем составляет около 80 символов. Указывая число столбцов, ширину табли- 
цы с шириной различных столбцов, авторы могут давать браузеру подсказки, 
обеспечивающие последовательное представление содержимого таблицы. 

Для последовательного представления содержимого таблицы браузеру необходимо 
знать число ее столбцов и их ширину. Шириной таблицы по умолчанию считается теку- 
щий размер окна (міасћ="100%"). Это можно изменить, задав требуемое значение для 
атрибута 18 ЕЪ элемента ТАВІЕ. По умолчанию все столбцы имеют одинаковую шири- 
ну, но можно определить ширину столбцов с помощью элементов сот, до начала собст- 
венно тела таблицы. 
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Остается еще проблема числа столбцов. Есть вариант — дождаться получения первой 
строки таблицы, но на это также может потребоваться продолжительное время, если в 
ячейках содержится много информации. 

Для автоматической обработки содержимого таблиц используется двухпроходный 
режим. Число столбцов определяется на первом проходе. На втором уже идет отображе- 
ние самой таблицы. 

Авторы НТМІ.-документов могут сообщить браузеру пользователя о том, следует ли 
использовать последовательное представление таблиц или определять размер таблицы 
автоматически, подгоняя под содержимое ячейки. Такие режимы устанавливаются атри- 
бутом 1ауоче. Значение 1ауоос=" Ғіхеа" задает последовательный режим обработки 
таблиц. В последовательном режиме число столбцов должно устанавливаться с начала с 
помощью атрибута со15 элемента ТАВІЕ. 

Атрибут Іауоцс= "аџсо" залает автоматическую обработку таблиц; это значение по 
умолчанию. 


Группы строк и столбцов 


Сначала считалось, что таблицы формируются из необязательного заголовка 
(САРТТОМ) и последовательности строк, которая в свою очередь состоит из последова- 
тельности ячеек. Затем в табличной модели начали различать ячейки заголовка и данных 
и позволили ячейкам занимать несколько строк или столбцов. 

Спецификация НТМЕ позволяет группировать строки таблицы в разделы заголовка, 
тела и нижнего заголовка (ТНЕАО, ТВОрҮ, ТЕООТ). Это упрощает представление инфор- 
мации в таблицах и может использоваться для повторения заголовков таблицы при пере- 
носе таблиц на другие страницы. В коде раздел нижнего заголовка помещается перед раз- 
делом тела таблицы. Это позволяет увидеть его до загрузки всего кода строк таблицы. 


Доступность 


Для людей с плохим зрением язык НТМЕ предлагает определенное упрошение ис- 
пользования графического интерфейса пользователя на базе окон. Модель НТМИ- 
таблиц включает атрибуты отметки каждой ячейки для поддержки высококачественного 
преобразования текста в речь. Те же атрибуты могут использоваться для поддержки авто- 
матизированного импорта и экспорта данных таблицы в базы данных и электронные 
таблицы. 


Возможности оптимизации НТМЕ-кода 


Уже не раз мы говорили о том, что в оптимизации НТМГ--документов можно выде- 
лить два основных направления: оптимизация кода и графических элементов. Об опти- 
мизации графики поговорим позднее, а пока обсудим доступные способы оптимизации 
НТМІ-кода. 

Как правило, всегда существует несколько способов написать код таким образом, 
чтобы он выглядел в окне браузера одинаково. Например, нам нужно выделить текст 
жирным шрифтом: 
<ЗТВОМС>Текст будет отображен жирным шрифтом</5ТВО№> 
<В>Текст будет отображен жирным шрифтом</В> 

Второй вариант дает реальную экономию в 10 символов, а следовательно, в 10 байт, 
так как каждый символ кодируется одним байтом. Если таких “ошибок” наберется дос- 
таточно много, экономия получится более существенной. 
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Другой способ сократить код — не писать в значении атрибутов кавычки. Браузеры и 
без них прекрасно все поймут, если эти значения — числа или англоязычные слова без 
пробелов. В таких атрибутах, как а1с, кавычки лучше сохранить, потому что чаще всего 
мы их пишем на русском и с пробелами. 

Но сокращать код страницы за счет кавычек не советую, поскольку язык НТМЕ. уже 
прекратил свое развитие и его преемником считается расширяемый язык разметки 
ХНТМІ. ХНТМЬ более строго относится к кавычкам в задании значений атрибутам, 
здесь они просто обязательны. Если вы планируете в будущем безболезненно перейти от 
НТМЕ к ХНТМІ, то лучше сразу привыкайте писать в атрибутах кавычки. Подробнее о 
языке ХНТМУ. поговорим позднее. 

Кроме того, никогда не задавайте атрибутам значения, которые используются по 
умолчанию. Разумеется, чтобы придерживаться этого правила, необходимо знать, какие 
значения используются по умолчанию. Однако с этим, я думаю, вы справитесь. 

Постарайтесь свести к минимуму комментарии в НТМ!-коде. На внешний вид стра- 
ницы они действия не оказывают, а на размер файла влияют существенно. Сохраните 
комментарии только там, где они действительно необходимы, и постарайтесь выражаться 
лаконичнее. Помните: краткость — сестра таланта! 

Не ставьте пробелов между ключевыми словами в элементе МЕТА. Например, <МЕТА 
папе="Кеумогаѕ" 1апд=“га" сопЕепЕ=“строительство, материалы, магазин“>. 
Поисковой системе их. отсутствие не помешает. 

Значительно сэкономить можно и на именах файлов и папок. Приведем простой 
пример. Допустим, у вас на странице имеется пять графических изображений и все они 
хранятся в папке 1тадез. Если назвать папку короче, например іта или даже просто і, 
это также даст довольно существенную экономию. 

Главное, во всем нало знать меру: стремление к оптимизации не должно отразиться на 
правильности кода и удобстве пользователей — например, если вы совсем откажетесь от 
написания альтернативного текста для изображений. В общем, не надо превращаться в 
параноика оптимизации кода. 


Перспективы развития языка НТМЕ 


Как уже упоминалось, в последней спецификации НТМІ. некоторые элементы и ат- 
рибуты были помечены как нежелательные для использования; им на смену пришли кас- 
кадные таблицы стилей. Развитие самого языка НТМІ. прекратилось. Теперь ставка де- 
лается на более современные средства разработки. Истинное назначение языков размет- 
ки — создать описание частей документа, а как эти части будут отображены в той или 
иной программе просмотра (визуальное отображение в окне браузера или может быть ау- 
диоустройство), решается другими средствами. 

В стремлении создать универсальное средство разметки был придуман ХМЕ 
(еХіепѕіЫе Ма Кир Гапёцаяе) — расширяемый язык разметки, с помощью которого мож- 
но “разметить” информацию, представленную в любом виле, а не только гипертекст. 
ХМЕ представляет собой набор правил и конструкций, с помощью которых можно соз- 
давать собственные элементы разметки. Эти элементы можно использовать для описа- 
ния содержимого произвольных документов. 

Своим появлением ХМ! обязан невозможности использования языка НТМІ, для 
представления в МеЬ данных самого разного рода, которыми пользователи также хотели 
бы обмениваться через Интернет. Например, сложные математические формулы можно 
поместить в НТМІ только в виде картинок. Можно привести много подобных примеров, 
ограничивающих применение НТМИ. 
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ХНТМЕ (еЖепзЫе НурегТеж Магкир І априаре) — расширяемый язык гипертекстовой 
разметки; это новая версия языка НТМІ., построенная в соответствии с правилами ХМЕ. 
Приведем некоторые отличительные особенности языка ХНТМІ по сравнению с НТМІ.. 


1. Документы, созданные при помощи ХНТМТ, должны быть написаны по более 
строгим правилам, чем документы НТМІ.. Требуется обязательное заключение 
значений атрибутов в кавычки. Правильная вложенность тегов должна быть 
строго соблюдена. 


2. ХНТМЕ, так же как ХМ!, учитывает регистр символов, чего не делает НТМІ. В спе- 
цификации ХНТМІ. сказано, что все элементы и атрибуты должны быть описаны 
символами нижнего регистра. Этого правила следует придерживаться при написа- 
нии всех документов ХНТМІ. Лучше это также делать при написании НТМ!- 
документов, чтобы обеспечить более легкий переход от НТМІ. кХНТМІ.. 


3. ХНТМЕ — чистый язык разметки, визуальное оформление элементов должно зада- 
ваться с помощью таблиц стилей, а не отдельных элементов, например В, ЕОМТ ит.п. 


По сути, развитие ХНТМІ. должно вернуть язык НТМЕ. на праведный путь, т.е. сде- 
лать его именно языком разметки, каким он был в начале своего развития. Как в этом 
случае создается визуальное оформление документов и подключаются таблицы стилей, 
мы будем изучать в следующей части этой книги. 


Обзор возможностей НТМІ-редакторов 


Вернемся к возможности полуавтоматического написания НТМ!-кода. Почему 
‘именно полуавтоматического? Да потому, что об автоматическом написании кода я даже 
говорить не хочу. Оно существует, и если вы хотите им пользоваться — пожалуйста, но 
тогда вы зря тратите время, читая эту книгу. 

Итак, существуют специальные программные средства, позволяющие писать НТМІ- 
код в полуавтоматическом режиме. Это так называемые НТМІ -редакторы. 

Перечислить их все я не берусь, назову лишь наиболее популярные редакторы: 
Нотебйе и Огеат\Уеауег от фирмы Масготейіа, ЕгопіРаре от Мкгозой. Сотроѕег от 
фирмы Ме{зсаре и многие, многие другие. Я не смогу описать каждый из них в отдельно- 
сти, поскольку тогда каждому из них придется посвятить отдельную книгу. Перечислим 
общие для них функции и возможности. 

Прежде всего надо сказать, что есть редакторы, которые предоставляют возможность 
редактировать только непосредственно НТМ!-код. Другие имеют еще и возможность 
визуального редактирования содержимого. Например, вы берете и при помощи мыши 
перемещаете какой-то объект на странице в другое место. Или вы, как в текстовом редак- 
торе, создаете и заполняете таблицу. НТМТ-код страницы при этом меняется автомати- 
чески. Сразу скажу, что такие функции редакторов именно “автоматические”, и полу- 
чаемый в результате НТМТ--код не поддается никакой критике. Пользоваться ими можно 
только в том случае, когда катастрофически нет времени на написание нормального руч- 
ного кода, т.е. в экстренных случаях. 

Еще одна очень удобная возможность НТМІ -редакторов — это просмотр содержи- 
мого страницы непосредственно в окне программы, а не в отдельном окне браузера, как 
мы делали до сих пор при написании кода в Блокноте. Поверьте, это экономит много 
времени. При этом НТМІ -редактор для отображения кода использует установленный 
в системе браузер. Если их несколько, как правило, в настройках редактора можно ука- 
зать, какой браузер следует использовать для этих целей. 
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Сам НТМГ-код в редакторах отображается разными цветами. Например, названия 
элементов и атрибутов выделяются одним цветом, значения атрибутов — другим, непо- 
средственно текст страницы — третьим. Кроме этого, различными цветами выделяются 
разные элементы. Цвета можно указывать в настройках редактора. По умолчанию редак- 
тор НотеЅіе выделяет обязательные элементы НТМІ темно-синим цветом, таблицы — 
зеленым, рисунки — розовым, формы — оранжевым. Значения атрибутов отображаются 
ярко-синим цветом, а основной текст остается черным. Вообще говоря, нс важно, каким 
именно цветом что выделяется, главное, что выделяется. Это значительно упрощает чте- 
ние и редактирование кода. Открыв документы. вы можете легко по цвету найти нужный 
элемент и отредактировать его. 

В редакторе вы также найлете палитры цветов (именных цветов, безопасных цветов 
Интернет) или редактор палитр, который поможет выбрать произвольный цвет и подста- 
вит в документ его шестнадцатеричный код. 

В изобилии имеются различные мастера создания конструкций: таблиц, форм и других 
элементов. Нужно заполнить только значения атрибутов, код сформируется автоматически. 
В качестве примера приведем окно создания элемента ТАВЬЕ из редактора Ноте$ие. 


Есин ә 


Е Зе ое ЛАсовезьу НТН 40) | гадое (АТМА) | Еж НТМ 40) 


ТАВІЕ Тәр | Виомаычресбе | Рюкю |  НТМЕ 0 
мак = Серада | — | 
Воды ГЕ Саброн [— | 
Ак пасада 


7 Оойе а еде — Г беде олде оп блә: 


зара ві 


11.2 Еетеги Юг сопзітисііпд {аЫеѕ 


11.21 Тћетан еіетепі 


«уюшктамт тавія - - 
(САРТТО?, (СОШ 1С0ЦСрОПР), ТНВАр?, ТРООТ?, тВОру+ > 


Е ира апёхдег оп ачде те 21| = 


Рис. 7.1. Окно создания элемента ТАВІЕ в НТМІ.-редакторе 
Ноте5йе 5.0 


На открытой в этом окне вкладке можно задать значения атрибутов: ширину, высоту, 
отступы между ячейками и внутри ячеек. Тип выравнивания выбирается из раскрываю- 
щегося списка допустимых значений; даже думать не надо, как их следует правильно за- 
писывать. Если оставить все поля пустыми и просто щелкнуть на кнопке ОК, в код вста- 
вятся два тега: <ТАВЬЕ></ТАВЬЕ>. 
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Если вы забыли, какие атрибуты за что отвечают, после щелчка на кнопке НЕЁР в 
нижней части окна будет выведено поле со справочной информацией (если документа- 
ция была установлена). Все проще простого! 


Основы построения М/ер-сайтов 


В этом разделе попробуем разобрать основные этапы создания сайтов, если рассмат- 
ривать этот процесс с точки зрения отношений “заказчик-исполнитель”. По-настоящему 
серьезные проекты редко создаются любителями, чаще над ними работает группа про- 
фессионалов: маркетологи, психологи, дизайнеры, верстальщики, программисты. Каж- 
дой группе отволится довольно большой объем работы. Но зачастую в нашей стране все 
эти функции выполняет один человек, мастер на все руки, человек-оркестр. Но все-таки 
если брать идеальную модель, она состоит из нескольких этапов. 

На первом этапе должна возникнуть предпосылка к деятельности, это изъявление за- 
казчиком желания создать МеБ-сайт или, по-другому, Интернет-проект (с этой задачей 
заказчик вполне может справиться самостоятельно) и заплатить за выполненную работу 
группе профессионалов. Затем необходимо сформулировать цели. которые заказчик 
стремится достичь в рамках проекта (возможно, на этом этапе заказчику уже понадобит- 
ся помощь профессионалов). Маркетологи, психологи и прочие сотрудники совместны- 
ми усилиями пытаются решить: какова целевая аудитория, ее процентный состав, прово- 
лят различные маркетинговые исследования, чтобы выяснить предпочтения целевой ау- 
дитории, и т.д. Результатом их деятельности должно стать четкое представление и со 
стороны разработчика, и со стороны клиента-заказчика, каким именно должен быть 
Меб-сайт. Представление разработчика о сайте здесь не случайно поставлено перед пред- 
ставлением заказчика, поскольку заказчик не является специалистом в области Меб- 
разработок и ему не знакома эта “кухня”, иначе бы он к вам просто не пришел. Мне ду- 
мается, что окончательное представление о своем сайте у заказчика формируется после 
того, как ему предоставят эскизы и наброски будушего сайта, так называемую “рыбу”. 
Рыбой называют готовый сайт, в котором вместо реальной текстовой информации ис- 
пользованы произвольные текстовые фрагменты. 

Итак, когда сформировалось четкое представление о будущем шедевре, составляется 
подробное техническое задание, которое утверждается обеими сторонами. Делается это в 
первую очерель для того, чтобы убедиться, что обе стороны правильно друг друга поняли. 
По техническому заланию в дальнейшем будет производиться контроль хода выполнения 
и качества работ. 

На следующем этапе наступает очередь дизайнера, который в каком-нибудь графиче- 
ском пакете, чаще всего это Адобе Рһоїіоѕћор, рисует макет будущего сайта. Макет — это 
картинка, похожая на снимок экрана в тот момент времени, когда сайт открыт в браузере. 
Готовая картинка отдается верстальщику, и он должен перенести ее в НТМІ. в максималь- 
ном приближении к оригиналу. Те элементы, которые невозможно представить никаким 
другим способом, кроме как в виле изображений, добавляются на НТМГ-страницу в виде 
изображений (например, логотил фирмы-заказчика). Другие элементы представляются со- 
ответствующими элементами языка разметки НТМІ. Все эти элементы компонуются 
и располагаются на странице соответствующим образом, — например, помещаются в ячей- 
ки таблицы или позиционируются при помощи С$$. Главное, чтобы в итоге в браузере вы 
‘увидели картинку, максимально близкую к той, что нарисовал дизайнер. 

После этого создается минимальный набор страниц, которые заполняются произ- 
вольным текстом, в результате чего получается так называемая “рыба”. Она показывает- 
ся заказчику, который может “пощупать” сайт в действии, после чего утверждает его или 
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нет... Если проект утвердили, то вам очень повезло, вы угодили заказчику практически 
с первого раза, но такое случается редко. Скорее всего, вас попросят что-то доделать или 
изменить, 


Классификация Меб-сайтов 


Теперь перейдем в несколько иную плоскость. Попробуем разобраться в классифика- 
ции сайтов. Классификаций таких может быть несколько — в зависимости от того, по 
какому признаку их классифицировать. Попробуем начать с принципов формирования 
страниц сайта, а именно с того, что выделим статичные и динамичные сайты. 

Статичные сайты представляют собой фиксированный набор страниц с заранее за- 
данным содержимым. Когда бы пользователь ни зашел на подобный сайт, он всегда уви- 
дит одно и то же. Информация на сайте меняется редко, и делается это вручную путем 
правки НТМ!--кода. 

Динамичные сайты формируются автоматически, т.е. как таковых таких страниц сай- 
та на сервере нет. На сервере располагаются только шаблоны, на основании которых 
формируются страницы. Данные для заполнения шаблонов берутся из базы данных. При 
изменении базы данных обновляется и содержимое У/еб-страницы, поскольку на нее по- 
мещается информация, выбранная из базы. Запрос к базам данных может происходить 
в явном виде, — например, когда вы заполняете некую форму для поиска и поиск ведется 
в соответствии с заданными вами параметрами. Или же запросы могут формироваться 
неявно, т.е. запросы как бы “зашиты” программистами внутрь шаблонов документов. 

Надо сказать, что возможен еще один вариант, представляющий собой сочетание 
первых двух. Это означает, что страницы сайта автоматически генерируются специаль- 
ной программой и в качестве исходных данных используется некая ‘база данных. Затем 
сформированный набор страниц публикуется на М№еЬ-сервере и хранится там уже в виде 
простых статичных документов. Чтобы изменить содержимое страниц такого сайта, не- 
‘обходимо сначала изменить информацию в базе данных, а затем заново сгенерировать 
страницы сайта — полностью или частично, в зависимости от внесенных изменений. 

| Примечание. Лет пять назад динамичные сайты были скорее экзотикой, и боль- 

шинство Меб-сайтов представляло собой статичный набор страниц. Но в настоя- 

! щее время картина радикально изменилась. Статичными в наши дни являются 

| чаще всего обычные домашние страницы пользователей сети или сайты неболь- 

| ших компаний или проектов, которые просто не требуют частого изменения. 


С точки зрения дизайна сайты делятся на информационные и презентационные. 
С моей точки зрения, в настоящее время также имеется тенденция к тому, что большин- 
ство сайтов становятся именно информационными. 

Информационный сайт, как правило, содержит много часто обновляемой информа- 
ции, поэтому он почти всегда динамичен. Примерами могут служить новостные ленты, 
газеты и журналы оп-Нпе, интернет-магазины. Такие сайты имеют большую посешае- 
мость (целевая аудитория более широкая), а следовательно, и нагрузка на каналы связи с 
ним больше, поэтому дизайн таких сайтов, как правило, не утяжелен графикой, прост, 
строг и лаконичен. 

Презентационный сайт ставит своей целью рассказать о фирме, проекте или событии. 
Его дизайн обычно более эффектен, чаще используется анимация и графика. Целевая ау- 
дитория значительно уже, чем у информационного сайта (например, только потенциаль- 
ные клиенты фирмы). Презентационному сайту может и не потребоваться динамичность, 
достаточно булет набора статичных страниц. 
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Имейте в виду, что деление сайтов на информационные и презентационные довольно 
субъективно. Настоящий информационный сайт распознать легко, в нем обновление 
происходит по нескольку раз на день. Но я могу сказать, что понемногу граница между 
информационными и презентационными сайтами стирается. Все М№еБ-проекты сейчас 
развиваются довольно быстро и динамично. 

Я не думаю, что после прочтения этой книги вы сразу возьметесь за какой-то слож- 
ный проект, сначала нужно на чем-то попрактиковаться. Как показывает опыт, лучше 
сразу учиться на конкретных примерах, пусть и небольших, но чтобы вы могли получить 
‘реальный положительный результат. Это воодушевит вас на дальнейшие подвиги. 

Целью этой книги не является научить вас рисовать или разрабатывать графический ди- 
зайн сайта, наша задача — научиться грамотно применять конструкции НТМЕ в конкрет- 
ных ситуациях. После ознакомления со всем теоретическим материалом, рассмотрим кон- 
кретный пример, в котором возьмем за основу не очень сложный рисунок и на его основе 
получим готовую МеБ-страницу, которая будет служить шаблоном для других страниц сай- 
та. Начнем с выбора способа кодирования, затем разберем на фрагменты исходный рису- 
нок и при помощи средств НТМІ. и С$$ соберем У\еБ-страницу. По ходу мы обязательно 
уделим время вопросам оптимизации графических элементов и кода документа. 


Типы навигации 


Итак, каждый сайт создается для того, чтобы опубликовать в сети Интернет какую- 
либо информацию. Если информация никак не структурирована, то ориентироваться 
вней очень затруднительно. Поэтому и сушествуют различные картотеки, каталоги и 
другие формы структурирования информации с целью облегчить поиск в большом объе- 
ме данных. 

Пользователь, пришедший на ваш \\еб-сайт, тоже должен иметь возможность найти 
на нем то, за чем он пришел. В этом ему поможет грамотно спроектированная навигация. 

Навигация — это система гиперссылок, позволяющая перемещаться по страницам сай- 
та и сигнализирующая о том, на какой странице пользователь в данный момент находится. 

В качестве самостоятельного элемента системы навигации можно выделить так назы- 
ваемое навигационное меню. Как правило, это перечень всех доступных разделов сайта. 
У сайтов со сложной многоуровневой структурой такое меню может быть также много- 
уровневым. Для более простых сайтов достаточно одного уровня. 

Прежде чем приступать к написанию кода страниц сайта на языке НТМІ., стоит как 
следует продумать систему навигации и то, как она будет реализована. Обычно это обсу- 
ждается еще до того, как будет создан графический дизайн, потому что навигация — не- 
отъемлемая часть сайта, и продумывать ее в отрыве от общего дизайна бессмысленно. 

Продуманная структура поможет пользователям легко ориентироваться на сайте. 
Для создания навигации можно воспользоваться правилом трех ссылок: любой документ 
на сайте должен быть доступен пользователю при последовательном перехоле не более 
чем по трем ссылкам. Таким образом, не следует создавать слишком сложной структуры 
с уровнями вложенности более трех. Если структура получается слишком сложной, то 
можно подготовить карту сайта — это поможет пользователю ориентироваться на нем. 

Карта сайта — это развернутая структура сайта, оформленная в виле ссылок на раз- 
делы. Карта сайта позволяет быстро найти на сайте нужный локумент в том случае, если 
это не удалось сделать при помощи пунктов меню. Ссылку на карту сайта можно также 
разместить в разделе МОЕКАМЕЗ в качестве альтернативного содержания для браузеров, 
не подлерживающих фреймы, что позволит пользователю познакомиться с разделами 
сайта и их содержимым. 
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Давайте обсудим в общих чертах, каким образом может быть реализована навигация 
на Меб-сайте. Основной ее составляющей, как правило, является меню. Меню может 
быть горизонтальным, когда ссылки на разделы сайта расположены в строку. Такое меню 
чаще всего размещают вверху страницы, сразу под логотипом фирмы или \\еб-проекта. 
В случае с вертикальным меню разделы располагаются в столбик. Такое меню может 
быть расположено слева или справа в окне страницы, а может даже и в се центре — это 
зависит от принятого дизайнерского решения. Общее правило такое: навигационное ме- 
ню должно быть полностью видно на первом же экране, чтобы пользователь, попав на 
сайт, мог оценить содержание сайта и увидеть, какие еще разделы доступны, не пользуясь 
прокруткой. Отсюда вытекает еще одно правило, которого неплохо было бы придержи- 
ваться: навигационное меню не должно быть слишком длинным, чтобы оно могло по- 
мещаться на одном экране монитора. 

Все, что говорилось выше, касалось расположения и формы меню. Поговорим о реа- 
лизации. Меню может быть реализовано в виде отдельных графических элементов. На- 
пример, для каждого раздела сайта нарисована картинка, которая и будет являться ссыл- 
кой на раздел. Или же можно использовать текстовые ссылки в меню. Можно также ком- 
бинировать оба способа. Вы наверняка не раз встречали в Интернет такое меню, когда 
рядом с каждой текстовой ссылкой располагается небольшая картинка, так называемая 
иконка или пиктограмма. Они оживляют довольно скучное текстовое меню и вызывают 
у пользователя определенные образные ассоциации. 

Если навигационная панель реализована с помощью графических кнопок, то лучше 
поместить альтернативное текстовое меню вверху страницы для тех пользователей, у ко- 
торых отключено отображение графики. 

Неважно, каким способом создано меню на вашем сайте, но чаще всего оно располага- 
ется в самом начале документа. Если на сайте слишком длинные страницы, — например, 
вы публикуете объемные статьи, — то, дочитав ее до конца, пользователю придется подни- 
маться в начало документа, чтобы выбрать следующий раздел для просмотра. Чтобы избе- 
жать такого неудобства, внизу страницы можно разместить ссылки для перехода на сле- 
дующую, предыдущие статьи и содержание. Аналогичный пример мы рассматривали при 
создании фотоальбома, только там была ссылка не на содержание, а на альбомы. 

Кроме этого, нелишне внизу страницы добавить текстовые ссылки на основные раз- 
лелы сайта на тот случай, если пользователь захочет покончить с чтением статей и посе- 
тить другой раздел сайта. 

Не забывайте о дублирующей навигации. Она будет полезна в том случае, когда струк- 
тура сайта будет многоуровневой. Дублирующая навигация строится по аналогии опре- 
деления пути к файлу, она помещается вверху страницы, чтобы пользователь мог легко 
определить, в каком разделе он находится. Например, если на сайте имеется раздел 
“Продукция”, который далее делится на подразделы “Отделочные материалы”, “Обои”, 
“Строительные смеси” и так далее, то, находясь в разделе “Обои”, можно в дублирующей 
навигации получить такую строку: 

Тлавная/Продукция/Обои 


Каждый раздел, соответственно. надо оформить в виде ссылок, чтобы можно было 
вернуться в него, если это потребуется. 

Начальная страница сайта обычно называется “главной” или “домашней”. В англий- 
ском варианте ее называют “Ноте”. Часто на страницах для возврата на первую страни- 
цу сайта размещают специальную ссылку, например, с изображением домика или в меню 
помещают соответствующий раздел “Главная”. Популярен и такой прием, когда ссылку 
на главную страницу оформляют с логотипа, который находится вверху на каждой стра- 
нице сайта. Возможно также и комбинирование всех способов. 
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Здесь надо сделать еще одно замечание. Те М№еЬ-страницы, с которых по вашей задум- 
ке должны “начинаться” сайты, должны называться іпдех. Когда в браузере набираем 
адрес сайта, явно не указываем название документа, который хотим увидеть, поскольку 
просто не знаем этого названия. Поэтому в том случае, когда название документа в ОКІ.. 
не указывается, Мер-сервер отсылает пользователю страницу с именем іпаех. 


Навигационные возможности браузеров 


Помимо той навигации, которую создает автор сайта, существует и альтернатива, 
предоставляемая браузером. Это кнопки перехода Назад (Васк) и Вперед (Рогмага). 

В процессе вашего путешествия по Интернет браузер фиксирует все страницы, кото- 
рые вы посетили. Он кэширует посещенные страницы (сохраняет во временном файле) 
на случай повторного обращения к ним и, кроме этого, записывает посещенные страни- 
цы в историю. История ведется в пределах одной сессии для каждого окна браузера от- 
дельно. После того как вы закрыли окно, история либо стирается, либо записывается 
в журнал, если такая возможность поддерживается браузером. Например, в браузере 
Ілќегпеі Ехрюгег по умолчанию ведется журнал посещенных страниц за последние 
20 дней. Этот срок можно изменить в настройках. 

История начинается с первой страницы, которая была открыта в этом окне браузера. 
Кнопка Назад позволяет вернуться по цепочке открытых ссылок назад на одну или не- 
сколько позиций, не запрашивая повторно загрузку страницы с сервера. Переход же по 
навигации сайта вызывает повторную загрузку станицы. Поэтому в целях экономии 
и времени и трафика в тех случаях, когла это возможно, пользуйтесь кнопкой Назад. 

Кнопка Вперед становится доступной после того, как был осуществлен возврат на 
предыдущую просмотренную страницу. Она позволяет вернуться на ту страницу, с кото- 
рой был осуществлен возврат по щелчку на кнопке Назад. Повторной загрузки страницы 
не происходит, и переход осуществляется довольно быстро. 

Когда М№еБ-страница формируется по запросу пользователя на динамичном сайте, то 
с возвратом на динамичную страницу могут возникнуть проблемы. Информация на этой 
странице может устареть, тогда вы увидите сообщение с предложением повторить запрос 
на сервер. И только после повтора запроса вернетесь на эту страницу. 


Как не попасться на крючок 


К чему же был весь этот разговор про историю и кнопки Назад и Вперед? Дело вот 
в чем: хочу еще раз ‘обратить внимание на то, что переходы по привязкам (меткам) так же 
записываются в историю, несмотря на то что это ссылки на ту же страницу. Это может 
запутать пользователя. 

Вот пример. Если у вас длинная страница (4—5 и более экранов), то можно разместить 
внизу кнопку Наверх, позволяющую перейти на метку в начале страницы, что тем самым 
дает пользователю возможность выбрать новый раздел сайта. Переход по такой ссылке 
также запишется в историю. и, щелкнув на кнопке Назад, пользователь опять вернется 
в конец страницы, вместо того чтобы вернуться на прелылущую страницу. 

Исправить такую ситуацию могут небольшие функции. написанные на языке )Лауаспре. 
Пример, который приведен ниже, я вычитала на сайте Артерия Лебедева, одного из самых из- 
вестных дизайнеров российской части Интернет. Несколько лет он публикует на своем сайте 
“Руководство для дизайнеров, работающих для \Ме6 и полиграфии”. Руководство насчитывает 
более 100 параграфов. Там можно найти много полезной информации. Второе издание руко- 
водства располагается по адресу: Һер: / /ммлм .агЕ1ерейеу. ги/Ккоуойѕсуо2 /. 
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Итак, вернемся к тому, как избежать записи переходов по ссылкам на метки в исто- 
рию. В этом сможет помочь другой механизм осуществления перехода — при помощи 
небольшого сценария, написанного на языке ЈауаЅсгірї, который будет перемещать нас в 
нужное место, к заланной метке. 


<5СВІРТ буре="Сехі/јауазсгір"> 
<!-- 
Ғипссіоп доТо(шеека) { 
доситепе .1осабіоп.гер1асе (шеека); 
гебшт Еа1зе; 


} 
и— 
</ЗСВТРТ> 
Метки в НТМ!-документе при этом расставляются обычным способом: 
<А пате="теЕка_а">ААА</а> 
<А пате="песка Ь">ВВВ</а> 
а переход к меткам осуществляется вызовом функции сото () , которой в качества пара- 
метра задается имя метки, на которую необходимо перейти. 
ааа" опС1іск= "гебигп доТо('#песка а') "> Перейти к ААА</а> 
ЗЬБЬ" опС1іск="гебогп дото ('#теска Ь') "> Перейти к ВВВ</а> 
Если необходимо разместить ссылку “Наверх” внизу документа, то можно воспользо- 
ваться другой встроенной функцией ЈахаЅсгірі, которая просто прокрутит документ к на- 
чалу, к точке с координатой (0, 0) — это его левый верхний угол. 
Вот код примера: 
<А һгеЁ="#сор" опС1іск="зсго11То(0,0); кесогп #а1зе; ">Наверх</а> 


Главное преимушество такого подхода — переход на метку не записывается в исто- 
рию навигации, а приведенный выше код корректно работает в случаях с отключенным 
Зауабспре. Если у пользователя отключен ЈауаЅсгірі, сработает атрибут ҺгеЁ="#сор", 
т.е. обычный переход по привязке. 
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Глава 8 


Практический пример 
использования НТМІ. 


В этой главе... 


> Создание сайта на основе таблиц 


Создание сайта на основе таблиц 


Цель этого примера — рассмотреть пример верстки от начала до конца, используя 
только язык разметки НТМЕ и не прибегая к возможностям С55. Затем в процессе изу- 
чения С$$ будем исправлять код и убедимся, насколько упрощаются некоторые вещи, 
если использовать НТМІ. и С$$ совместно. 

Дизайнер предъявил нам макет сайта об истории и культуре украинцев Нижнего По- 
волжья, созданный им в графическом редакторе (рис. 8.1). 


пурбучиться зикдуються діты Арав — 
эка дото хаби сий народ 
" бахаг бому добра, 
бочуҳі за семе объмуться. 
Ф алами 


Увнктьй посититаљі 
Мы рады приветствовать Вас не сайте «Жалтый Клык», посвищеном историк и культуре утренние, 
п Ножи Повопа. 
Основной целью провхта является обори прарстааление информацим 96 историио-культурном нас. 
перим м совреманной жми урани Нижнего Поволнья 
Сомдатали сайта станат перад собой зади объадрнени усилий учаны и всех небизразличых п 


торласа справка о каждом насиобнном пункте, де уҳраянцы состааяит основную или значитегьну 
часть вгожитьлей. 
В рр орсанизацин размоцина зкформация об уқраннсокх мцрнельмоугьтурњи ороачкыц. 
тасрнастао Нечего Повопюя на 


Рис. 8.1. Макет сайта “Желтый клин”, созданный в АдоБе Рһоіоѕћор 


Сайт выполнен в желто-голубых тонах (у вас картинка черно-белая), в соответствии 
с флагом Украины, и содержит много орнаментов. Наша задача — максимально близко 
повторить этот рисунок в НТМЕ-коде. Сначала попробуем сделать так называемый фик- 


сированный дизайн, взяв за основу таблицу. Ширина таблицы будет равна ширине ри- 
сунка и не будет меняться. Затем попробуем превратить его в “резиновый” дизайн таким 
образом, чтобы страница располагалась во всю ширину окна браузера независимо от раз- 
решения монитора пользователя. 

Давайте разбираться, какие графические элементы придется использовать. Набор 
изображений в левом верхнем углу представить в виде текста нам точно не уластся, то же 
самое с флагами и орнаментами на странице. 

Теперь посмотрим на заголовок сайта: “Желтый клин”. Он написан декоративным шриф- 
том Мопоїуре Согѕіха, и теоретически мы можем использовать вот такую конструкцию: 
<РОМТ вахе="7" со1ог="#0000ЕР" Рас. 


Мопобуре Согѕіуа">Желтый клин</ЕОМТ> 


Но в том случае, если у кого-то из пользователей сети не окажется такого шрифта, 
браузер использует любой доступный ему шрифт, и никто не сможет предсказать, как это 
будет выглядеть на экране у пользователя. Надеяться мы можем только на такие стан- 
дартные шрифты, как Тітеѕ Ме\ Котап, Апа!, Таһота или УегЧапа, поэтому для заго- 
ловка сайта тоже лучше использовать рисунок. 

Эпиграф на первой странице написан на украинском языке, для универсальности его 
тоже лучше сохранить в виде картинки, так как компьютеры далеко не всех пользовате- 
лей могут корректно поддерживать этот язык. А вот пункты меню вполне можно задать 
в виле простого текста. 

Таким образом, у нас набирается довольно большой объем графики, но мы постара- 
емся грамотно ее оптимизировать, и вес нашей страницы вместе с графикой не будет 
превышать 50—60 Кбайт. 

Пока елинственный инструмент, который позволит нам расположить элементы на 
странице в нужных местах, это таблица. В ячейки таблицы мы можем поместить изобра- 
жения и текст так, что вместе они создалут страницу, аналогичную той, что нарисовал 
дизайнер. 

Размер исходного макета 640х480 пикселей, значит, и ширина нашей таблицы будет 
640 пикселей. Потом попробуем сделать ее равной 100% от любой возможной ширины 
экрана. При работе с таблицами лучше не просто разбить весь дизайн на ячейки, а ис- 
пользовать несколько таблиц. Вы же помните, что браузер не отобразит таблицу ло тех 
пор, пока не прочитает се код целиком. Если вся страница — это одна таблица, то во 
время загрузки страницы пользователь ничего не увидит, а потом перед ним сразу поя- 
вится вся страница целиком. Если же мы разобьем страницу на несколько блоков 
и оформим их в виде отдельных таблиц, то уже в процессе загрузки пользователь сможет 
видеть часть страницы и начать изучать ее. я 

Попробуем еще раз взглянуть на макет и подумать, как проще всего с точки зрения 
верстки разбить его на части. Так как для верстки мы будем пользоваться таблицами, то 
и рассуждать должны в терминах таблицы. Что мы в этом случае можем делать? Поме- 
щать в ячейки рисунки и текст, задавать цвет для фона или фоновое изображение — вот, 
пожалуй, и все. Тогда надо разделить весь макет страницы на ячейки таблицы таким об- 
разом, чтобы это можно было реализовать в НТМ!. Рассмотрим вариант разбивки, пока- 
занный на рис. 8.2. 

Фрагмент 1 представляет собой рисунок, который целиком можно поместить в ячейку 
таблицы. Аналогично можно поступить и с фрагментом 2. Изображения флагов в фраг- 
менте 3 по задумке должны быть ссылками и указывать на другие версии сайта, написан- 
ные на русском, украинском и английском языках. Его можно оформить в виде карты 
ссылок или разрезать этот фрагмент еще на три, в каждом из которых останется только 
один флаг. Давайте для практики оформим фрагмент 3 в виде карты ссылок. 
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задй мириться помал украу 
тд про Нпоширения 

турбуються у некдужтться даты Украи — 
оса хто избить си парод 


баха: дому добра. 
© ) Бори ма семе абемущьск, 


Увакатый посетата! 
Б) ы ра прнватстоовать Вас на сайте «Желтый Клана, посваценном истории и угътура урнек 
Е некни Поволжья 
Оскон целью прота яалвется бор предстали ифорыациы Об истории вульгурном нас 
арм н ооврешенной оз украинча Никого Повосжья. 
‘Создатели сайте стваят перад собой задачу сбъмдиеения усилий ученых вск небезразличных п 
одой а изум сохранении исторан  сутътурмусранискхо народа 

В рубрал росяленея грааставлен иформация об истории заселения юки Низатогжскох 
рая с начала ХУШ в до настолцего времени В елфавитном указателе носаленных пучтоя др-а ис 


Ф. Богааш 


(обкцествах) м творческих коглет вах. оао: украинцев Нико Поволжья на с. 
1 а 


Рис. 8.2. Макет сайта, разбитый на фрагменты для последующей верстки 


Теоретически мы бы могли цветочный орнамент вверху страницы выделить в отдель- 
ный фрагмент, оформить его отдельной строкой таблицы, где фоновым изображением 
служил бы единственный цветок, который автоматически размножался бы в нужном нам 
количестве. Но изображение людей в национальных украинских костюмах располагается 
поверх полосы орнамента, и их ноги с ним пересекаются (рис. 8.3). Поэтому такой вари- 


ант нам использовать не удастся. 


гум укр 


еакака иаа воан уекааЕе н 
Лури қултум 


Рис. 8.3. Выделение фрагментов орнамента из макета 


Тем не менее идея с использованием фона имеет право на жизнь, особенно в том слу- 
чае, когда необходимо будет создать “резиновый” дизайн. В качестве фона первой табли- 
цы, реализующей фрагменты 1—4, можно взять графический файл сор Ьс.сі Е такого 


вида, как показано на рис. 8.4. 


Рис. 8.4. Графический файл кор_Ь9.91Е 8] 


Размножив его по горизонтали, получим такую полосу, как нам требовалось. Все фо- 
новые изображения, которые будем использовать, созданы таким образом, чтобы при 
стыковке нужных краев получался целостный рисунок. Дополнительно необходимо бу- 
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дет проследить за стыковкой рисунков на границе 2-го и 4-го фрагментов: незначитель- 
ное смещение в районе цветочного орнамента может испортить внешний вид всего сайта. 
Но это решаемая проблема. Необходимо сделать так, чтобы цветочный орнамент в левой 
части фрагмента 1 и во фрагменте 2 был такой же, как и в выбранном нами фоне. Это 
легко делается. Объединим фрагменты 1—4 в одну таблицу такого вида: 


Фрагмент 1 Фрагмент З Фрагмент 4 


Ячейка, содержащая изо- Изображение флагов стран Название сайта 
Сражение фрагмента 1 Изображение выровнено по 
правому краю 
Фрагмент 2 
Изображение фрагмента 2 


Для этого необходимо получить изображения этих фрагментов. Получают их обычно 
при помощи редактора ИпареКеаду фирмы АйоБе, который позволит разрезать макет на 
фрагменты и настроить параметры оптимизации для каждого фрагмента отдельно. Для 
‘данного примера использовался формат СІЕ с количеством цветом от 16 до 256 в зависи- 
мости от фрагмента. Итак, нам потребуются изображения, показанные на рис. 8.5-8.9. 


Высота: 94 

Ширина: 107 

Размещение в коде: ячейка фрагмента 1 
Формат: СЛЕ, 256 цветов 

Рис. 8.5, Графический Размер: 9 Кбайт 

файл ор1.91Е 


и Высота: 74 
Ширина: 107 
Размещение в коде: ячейка фрагмента 2 


М Формат: СІР, 256 цветов 
Рис. 8.6. Графический З з 
файл Еор2.9іҒ Размер: 7 Кбайт 


Клин Высота: 20 
Желтый Ширина: 107 
с ; Размещение в коле: ячейка фрагмента 3 
. 8.7. 3. 91Е 
Е Формат: СЛЕ, 256 цветов 
Размер: 2 Кбайт 


сайт об историм и культуре украинци Эбижнего Ловолжря: Высота: 47 
о $ Ширина: 290 
. 6.8. 1. 
вата, одамеки райезел ез. ді Размещение: ячейка фрагмента 4 
Формат: СІЕ, 32 цвета 
Размер: 5 КБайт 


Для того чтобы самостоятельно выполнить верстку, потребуются аналогичные кар- 
тинки. Их можно скачать по адресу: ВЕЕр: / /уъм.та1сћик.ги/ехапр1е1.2ір. В этом 
архиве найдете все нужные изображения. Код страницы специально не прилагаю. Будем 
писать вместе, чтобы научиться верстать самостоятельно, необходимо это проделать 
вручную от начала и до конца. 
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Те, у кого нет возможности скачать эти изображения, могут продолжать работать 
с нами. Табличный каркас у вас все равно получится, просто вы не увидите самих изо- 
бражений, как будто они отключены в браузере. 

Теперь попробуем собрать из этих фрагментов, которые вы скачали, первую табли- 
цу — заголовок сайта. Давайте заранее договоримся, что все файлы для этого примера 
будем хранить в отдельной папке, а изображения для этого проекта в папке 1тадез. 

Первое, что надо сделать, — создать новый НТМГ--документ. Продолжайте делать это 
в Блокноте или перейдите в НТМІ -редактор. Вы уже достаточно грамотны, чтобы поль- 
зоваться им без ущерба для кода. Так как это будет первая, начальная, страница сайта, то 
назовем файл 1п4ех.ВЕт1. Далее в него надо записать обязательные элементы НТМЕ- 
документа и ОТО; сразу же зададим название документу — “Желтый клин”: 
<!ОСТУРЕ НТМЬ рыБ14с "-//ИЗС//ртр НТМЬ 4.0 Тгапвієіопа1/ /ЕМ" 

*ВЕБр: //ммм м3 „оге ТЕ/КЕС-Һет140/10ове.аса"> 
<НТМІ> 

<НЕАО> 

<ТИТГЕ>Желтый клин</ТІТЦЕ> 

</НЕАО> 

<ВОрҮ> 

</вору> 

</НТМЬ> 


Теперь можно приступать к формированию первой таблицы для размещения фраг- 
ментов 1—4, макет которой привели выше. В таблице будет две строки и три столбца. 
Фоном для таблицы будет служить изображение сор_Ъ9.а1Е, ширина таблицы равна 
640 пикселям, т.е. ширине изображения. Границы у таблицы быть не должно, расстояния 
между ячейками и отступы внутри ячеек тоже должны быть нулевыми, иначе картинки у 
нас не состыкуются. Кроме фонового изображения, можно залать еще и фоновый цвет, 
он появится до того, как загрузится изображение фона. Код желтого цвета, который мы 
использовали в этом примере, — #РЕЕЕбУ". Итак, получим такой элемент ТАВЬЕ: 
<ТАВЬЕ Ьаскогоцпа= "ітадев/ сор Ьа .9іЕ" Басо1ок="НЕРЕР6Э" Богдег="0" 


се11врасіпд="0" се11райдіпа= міасћ="640*> 
</ТАВЬЕ> 


Здесь уместно упомянуть о том, что порядок указания атрибутов значения не имеет, 
но лучше их все-таки как-то упорядочить, например по алфавиту или по значимости для 
элемента. Вам же легче потом будет ориентироваться в них. 

Приступим к формированию первой строки таблицы. Первая ячейка будет содержать 
рисунок сор1 .91Е. Она должна перекрыть собой две строки. Вот ее код: 
<тТВ> 

<ТР гомврап=*2"> 

<1Мб вгс="іладез/кор1.іЁ" мае: 
костюм"> 

</тр> 
</ТЕ> 


107" Һеісће="94* а16="Украинский народный 


Обратите внимание, что для изображения указываем ширину и высоту, чтобы браузер 
сразу же отвел под рисунок необходимое место. 

Вторая ячейка в этой строке содержит рисунок сорз .9іЁ, который будет являться 
картой ссылок на разные варианты этого сайта. Код самой ячейки булет таким: 


<Тр><1Мб згс="ітасеѕ/ёорз.9іє" міаећ="107" Һеіс̧һћ="20" а10="флаги" 
изетар=" #соипеку"></тТр> 
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Атрибут изещар=" #соопегу" говорит о том, что для изображения используется кар- 
та ссылок с именем соџпсгу. В этой карте три прямоугольные области. вылеляющие три 
флага. Ссылки будут указывать на версии сайта, написанные на других языках. Отдель- 
ные версии хранятся в папках еп (англоязычная версия), ца (на украинская версия). Мы 
разрабатываем русскую версию. Вот описание карты ссылок: 


Английская версия" соогаз="69,5,94,18" Вке{="/еп"> 
<АВЕА қһаре="гесё* а16="Украинская версия" соогаз="38,5,63,17* НгеЁ="/ца"> 
<АВЕА зраре-"кесЕ" а1Е-"Русская версия" соокав="6,5,31,18" їшеб="іпдех.Һот1"> 
</МАР> 


Это описание можно поместить в любое место документа в пределах секции ВОруү. 
Третья ячейка первой строки будет перекрывать опять же две строки (гомзрап="2") 
и содержать два изображения: Е1Е1е1.91Ё и сіс1е2.91Ғ. Они представляют собой 
надписи, но мы решили их оформить в виде изображений из-за нестандартности шрифта 
и, кроме этого, разбили единое изображение на две части. Это позволит пользователю 
быстрее увидеть результат на экране, а нам — сэкономить на суммарном размере файла. 
Обе картинки должны быть расположены в правом верхнем углу страницы. Для этого за- 
дадим параметры: а1ідп="гідһё"и уа1ідп=" бор": 
<т0 а1ісп=*кісће" үа1іс̧п="ор" коиврап="2"> 
<1МС згс="іладев/сіс1е1.91Е" міабһ="290" һеідһс="47" а1Е=”Желтый клин"><ВВ> 
<ІМӦ Бүс="іпадеѕ/0іС1е2.91Е" мідсћһ="412" һеісһе=*23" а1с="сайт об истории 


и культуре украинцев Нижнего Поволжья"> 
</тр> 


Элемент вк переведет строку, и второй рисунок будет уже на следующей строке. Пол- 
ный код этой строки получится “таким: 


ма" 
падев/6ор1 1" изаен="107" незане="94* а1е=“Украинский народный 


<ТМС Бгс="іпадев/сор3.9іє" міаеһ="107" незанЕ="20" а1е="флаги" 
изетар="#социЕгу"> 

</тр> 

<ТО а119п="к19ВЕ" уа1ідп=* сор" гоиврап=*2*> 

іладев/сіс1е1.91Е" міасһ="290" Һеідће="47" а16= "Желтый клин"><ВЕ> 
Зтадев/Е1Е1е2.91Е" міасһ="412* һеідһы="23" а1Е="сайт об истории 
и культуре украинцев Нижнего Поволжья"> 

</тр> 

</тВ> 


Займемся второй строкой. В ней булет всего одна ячейка с фрагментом 2. Вот код для 
второй строки: 
<тв> 
<тр> 
<ІМО згс="іпадеѕз/сор2.9іғ" лав: 
</тр> 
</тв> 


107" везоь! 


74" а1е="Саратовский мост“> 


Казалось бы, все сделано правильно, но если посмотреть, как это выглядит в браузе- 
ре, то можно заметить, что между картинками есть небольшой зазор, закрашенный жел- 
тым цветом. Вокруг третьего фрагмента, который является картой ссылок, есть рамка 
синего цвета. Этот “дефект” устраняется явным указанием атрибута Богдег="0"; его 
мы не раз уже описывали. 
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Давайте теперь разберемся, как же убрать зазоры межлу изображениями и получить 
целостную картинку. Тот зазор, что мы сейчас наблюдаем, вызван несовпадением шири- 
ны рисунков и ячеек таблицы. Эти размеры можно согласовать, указав ширину первой 
ячейки таблицы, равную ширине рисунков — мідећ= "107". 

Теперь рисунки соединились, ненужная рамка исчезла. Таблица сверстана правильно 
для фиксированной ширины в 640 пикселей. Если попробуем исправить ширину и уста- 
новить ее равной 100%, то таблица автоматически растянется на всю ширину экрана, и 
‘благодаря тому, что в качестве фона у нас залано изображение. она легко раздвинется на 
экран любой ширины. 

Теперь отчетливо бросается в глаза еще один недостаток — белые поля у краев окна 
браузера. Причем наблюдаться они будут в любом браузере, называются эти нежелатель- 
ные элементы полями (тагріпѕ), и чтобы они исчезли, необходимо значения соответст- 
вующих атрибутов установить равными нулю. Средствами НТМІ этой цели можно дос- 
тичь, указав для элемента ВОБУ атрибуты БоЕкоштага1т="0”, гортака1п="0", 1еёс- 
пагдіп="0"* игісћетагдіп="0". 

Приведем полученный код: 
<!РОСТУРЕ НТМ рир1іс *-//ИЗС//рто НТМЬ 4.0 Тгапзібіопа1//ЕМ" 

*ВЕБр: //ммм .м3 .оге/ТЕ/ВЕС-ћоп140/100ѕе.дса"> 
«нтмь> 
<НЕАО> 

<ТГТЬЕ>Желтый клин</ТІТІЕ> 


0" сортагсіп="0" 1еЕБтакали="0" гісћіопагаіп="0"> 


гесі" а1Е=”Английская версия" соогдѕ="69,5,94,18" Вгеё=" /еп"> 
гес" а1Е="Украинская версия" соогӣз="38,5,63,17" Һгеё="/џа"> 
кесі" аїс="Русская версия" соог45="6,5,31,18" Бхеё="/ки"> 


<ТАВЬЕ Баскакоцпд="1тадез/кор_ 9.91" Ьссо1ог="#ҒЕРЕб9" Бокдех 
се11зрас1та="0" се11раддіпа= міаећ= 100%" > 

<ТВ> 

<ТО гомерап="2" міасһ="107"> 

<1МС а1с="Украинский народный костюм" ѕгс="ітадез/бор1.9іє" міасћ= "107" 


о" 


изетар=“#социЕгу" міаећ="107"> 
</то> 
«ТЮ а1ідп="гієћі" уа119п=“Еор" комзрал: 


Желтый клин"><ВВ> 
іпадев/сіС1е2.91Е* мідһ="412" Һеідһс="23" а1е=“сайт об истории и 
культуре украинцев Нижнего Поволжья"> 

</тр> 

</тВ> 

<Тв> 

<тр> 

<ІМС ѕүс="іпадез/сор2.91Е" мібһ="107" Һеідһ="74* а1е=“Саратовский мост"> 
</тр> 

</тВ> 

</ТАВЬЕ> 

</вору> 

</нтмь> 
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Хочу сделать еще одно замечание: несмотря на то что НТМ!. должен игнорировать 
лишние символы пробелов в коде, при работе с изображениями они могут сыграть роко- 
вую роль. Например, вы вставляете в НТМГ--документ две картинки с расчетом, что они 
состыкуются без зазоров, и пишете такой код: 
<ІМС Бгс="ішасдеѕ/іпо1.9іҒ" міаєһ="52" Һеісі 
<ТМб згс="іпадев/ітд2.91#" мідеһ="36" Һеіс̧ы 


50"> 
="50"> 
т.е. вы расположили код элементов на разных строках. Может оказаться так, что между 
такими рисунками окажется зазор. Чтобы его удалить, необходимо и в коде элементы 
ІМС поместить вплотную друг к другу, т.е. удалить между ними все символы пробела, 
перевода строки и им подобные таким образом: 
<ІМО эгс="Зщадев/1 191.912" мідеһ-"52" Һеісһ="50"><1М6 вгс="іладез/ітд2.91Е" 
мідећ= "36" һеіс="50"> 

Тогда зазор между рисунками исчезнет. Это же касается размещения рисунков внутри 
ячеек. В примере выше код специально разбит на строки, чтобы легче его было читать, а 
вам придется в реальности убрать лишние переводы строк и пробелы даже между тегами 
<ТО>, <1Мб> и </Тр>, чтобы рисунки идеальным образом состыковались. Вот так: 
<Тр><1МС згс="ітадез/бор2.9іЁ" міаєһ="107" везчье="74"></Тр>. 


Как видите, довольно маленький фрагмент кода, и уже все не так просто, как хотелось 
бы. Но с первой частью задачи мы успешно справились, и в результате во всех браузерах 
‘будем видеть одинаковую картинку. 

Еще один совет: если при работе с таблицами что-то где-то не сходится и вы никак не мо- 
жете понять, что и где, временно включите отображение границ таблицы — Богдег=" 1". Вы 
увидите границы и поймете, в коде какой ячейки содержится ошибка. Чаще всего ошибки 
стаблицами возникают из-за несовпадения количества ячеек в строках при использовании 
атрибутов со] зрал и гомѕрап. Включение границ поможет выявить ошибки. 

Теперь займемся фрагментами 5-7. Их также можно поместить в отдельную таблицу. 
Ее структура будет довольно проста. 


Фрагмент 7 


располагаться основное содержимое все- 
го сайта, в том числе эпиграф, 


Для этой части нам потребуются изображения, показанные на рис. 8.9-8.11. 


Высота: 192 

Ширина: 127 

Размещение в коде: фон для фрагмента 5 
Формат: СЛЕ, 64 цвета 


Размер: 5 Кбайт 
Рис. 8.9. Графический 
файл Ьа тепи.9іғ 
я Высота: 50 
н Ширина: 20 


Размещение в коде: фон для фрагмента 6 
Формат: СТЕ, 16 цветов 
Размер: 51 Кбайт 


Рис. 8.10. Графический 
файл Ба_11пе.91Е 
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упрека культура Высота: 133 


адий про В почиеренко Ширина: 234 
ри ое ок Размещение в коде: изображение в правом верхнем уг- 
ока хто любить сай народ Я 
1 баҳо бому добра, лу лля ячейки фрагмента 7 
5 уху се не вбъмуться, Формат: СІР, 16 цветов 
04 Размер: 5 Кбайт 


Рис. 8.11. Графический 
файл ерідгағ.діғ 


Итак, вторая таблица будет проще первой: одна строка и три столбца. Ширина табли- 
цы должна быть равна 100%, так же как и у первой, фон булет белым: 


<ТАВЬЕ рдсо1ог= "ућісе" Бог4ек="0" се115рас1па="0" се11радаіпа: 
100% "> 


о" 


-код трех столбцов таблицы -. 
</ТЕ> 
</ТАВІЕ> 


Первые два столбца должны иметь фиксированную ширину, причем ширина первого 
столбца должна равняться ширине фонового изображения, т.е. 127 пикселей. Внутрь мы 
помещаем перечень пунктов меню сайта. Меню, как мы и договаривались, будет тексто- 
вым, это позволит легко его редактировать: добавлять недостающие пункты и удалять 
ненужные. Код первой ячейки пока будет таким: 
<Т0 Баскагошпа-"іладеѕ/Ьа_лепи.сіє" міасћ="127"> 

Поселения<ВЕ> 

Организации<вВ> 

Научные материалы<ВВ> 

Творчество<ВЕ> 

Новости<ВЕ> 

06 Украине<вв> 

Гостевая<ВЕ> 

Меценаты<ВВ> 

Ссылки 
</т0> 


Ссылки и все меню оформим до конца чуть позже, сначала закончим таблицу. Про- 
должим с фрагментом 6, помещенным во вторую ячейку. 

Вторая ячейка также должна иметь фиксированную ширину, содержимого у нее не бу- 
лет, она несет лишь декоративную функцию и задает разделительную вертикальную поло- 
су-орнамент. Чтобы орнамент продолжался на нужную длину (а заранее длины страницы 
мы не знаем), укажем его в качестве фона, тогда он будет автоматически размножаться 
вдлину до необходимого предела, т.е. соответствовать длине всей НТМІ -страницы. 
<ТО Баскогоцпа="іпасеѕз/Ь Ліпе.діЁ" мідеһ="20">5пЬѕр;</Тр> 


Чтобы подчеркнуть отсутствие содержимого этой ячейки, поместим в нее символ не- 
разрывного пробела, хотя это и не обязательно; поскольку границ у таблицы все равно 
нет, то и проблем с отображением границ у пустых ячеек не предвидится. 

Ширину третьей ячейки указывать не нужно, она будет занимать все оставшееся ме- 
сто. В ней будет располагаться изображение с эпиграфом, которое необходимо выров- 
нять по правому краю. Основной текст страницы должен начинаться ниже эпиграфа. 
Реализовать это можно двумя путями. 
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Первый вариант — изображение помещаем внутрь контейнера рту и выравниваем 
его содержимое по правому краю таким образом: 


<0ІУ аіісп=*гієћс"> 
іпадеѕ/ерісгаЁ.сіё" міась="234* Һеісһ="133" а1="Эпиграф"> 


— Основной текст страницы. 
Второй вариант — воспользоваться выравниванием самого изображения и принуди- 
тельным разрывом строки ВК. 


<1МС згс="ітадеѕ/ерідгаҒ.діЕ" єіаєһ= 
ідп=“гісће"> 


234" Һеісһћ="133" а1! 


="Эпиграф" 


— Основной текст страницы. 


Но в этом случае текст появится у верхней границы страницы и будет обтекать эпи- 
граф слева. Но нам нужно, чтобы текст отображался строго под эпиграфом. Чтобы до- 
биться этого, нужно для элемента ВК задать атрибут с1еаг="гісће", тогда текст будет 
начинаться только на той строке, где правое поле страницы будет пустым, т.е. уже под 
эпиграфом. 
<ІМС зүс="іпадеѕ/ерідга#.сі?" мібеһ=*234" Һеіћы="133" а1е="Эпиграф" 
а1ідп="гісс"> 
<ВВ с1еаг=*гідһё"> 
- Основной текст страницы. 


Первый вариант кажется более логичным и правильным. Во втором варианте ис- 
пользовался атрибут с1еаг, который помечен как нежелательный для использования, 
впрочем атрибуты а1 ісп также помечены как нежелательные для использования. Ви- 
димо, надо выбрать тот вариант, который короче. Первый короче, хоть и ненамного 
(7 символов). 

Добавим в третью ячейку заголовок первого уровня с выравниванием по центру и не- 
сколько параграфов текста: 


<То> 

<0ІУ а1іст=*гієће"> 

<ІМС згс=*іладез/еріс̧гаҒ.діє" міасһ="234° Һеісһ="133° а1е="Эпиграф"> 
</0ту> 

<Н1 а1ісп=“сепсег">Уважаемый посетитель! </Н1> 

<Р>Мы рады приветствовать Вас на сайте "Желтый Клин", посвященном истории 

и культуре украинцев Нижнего Поволжья. </Р> 

<Р>Основной целью проекта являются сбор и представление информации об истори- 
ко-культурном наследии и современной жизни украинцев Нижнего Поволжья. </Р> 
<Р>Создатели сайта ставят перед собой задачу объединения усилий ученых и всех 
небезразличных людей в изучении и сохранении истории и культуры украинского 
народа.</Р> 
<Р>В рубрике поселения представлена информация об истории заселения украинца- 
ми Нижневолжского края с начала ХУІІІ в. и до настоящего времени. В алфавит- 
ном указателе населенных пунктов дана историческая справка о каждом населен- 
ном пункте, где украинцы составляют основную или значительную часть его жите- 
лей.</Р> 
</тр> 


Приведем код второй таблицы: 
<ТАВЬЕ Ьсдсо1ог="ћібе" Бог4ег="0" се115расіпа="0" се11радаїпо="0" 
мідеһ="100%"> 
<тв> 
<ТО Баскакоцпа="Зтадез/Ъа_мепи.91Е" міасћ="127"> 
Поселения<ВВ> 
Организации<Вк> 
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Научные материалы<ВВ> 
Творчество<ВЕ> 
Новости<ВЕ> 
06 Украине<Вв> 
Гостевая<ВЕ> 
Меценаты<ВВ> 
Ссылки 
</то> 
<ТО раскогоші="ітадев/Ьа Ііпе.сіё" міасћ="20°></т0> 
<то> 
«РТУ аїідп="гіһе"><ІМб Бг: 
а1е="Эпиграф"></рту> 
<Н1 а]ісп="сепбег">Уважаемый посетитель!</Н1> 
<Р>Мы рады приветствовать Вас на сайте "Желтый Клин", посвященном истории и 
культуре украинцев Нижнего Поволжья. </Р> 
~ Текст других параграфов .. 
</тр> 
</ТВ> 
</ТАВІЕ> 


іпадеѕ/ерісга#.сіғ" іде 


"234" Һеідћс= "133" 


В браузере Мода 1.6, как и вдругих, после этого вы увидите то, что показано на рис. 8.12. 
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Рис. 8.12. Вид страницы в браузере Мога 1.6 
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Отметим, что здесь не так, т.е. не соответствует графическому макету дизайнера. 


Пункты меню не оформлены как нужно и, кроме этого, располагаются вертикаль- 
но по центру ячейки, а должны быть сверху. Это можно исправить, задав для пер- 
вой ячейки атрибут уа1ісп=" бор" (сейчас применено значение по умолчанию 
уа1ісдп="сепсег"). Горизонтально они должны быть выровнены по правому 
краю; зададим атрибут а119п="к19ЪЕ" (сейчас применено значение по умолча- 
нию а1ідп= "1еғё"). 


Шрифт для всего текста макета выбран Апа!|, а на созданной странице везде Тітеѕ 
М ем Котап. Это можно исправить, используя элемент ҒОМТ, но его частое исполь- 
зование довольно сильно увеличит код, потому что внутрь тегов <ЕОМТ>< / ЕОМТ> 
придется взять каждый пункт меню, заголовок и параграф. Для браузера Іпіегпеї 
Ехріогег можно задать в секции НЕАРр элемент <ВАЗЕРОМТ Ғасе="Агіа1">, но 
он не будет работать в Мо2 Ша и Орега. 


Можно в этой ситуации найти золотую середину: указать элемент <ВАЗЕЕОМТ 
Ғасе= "Агіа1" > для Ниегпе! Ехріогег и, учитывая небольшую распространенность 
Мога и Орега, поместить внутрь тегов <ЕОМТ>< /ЕОМТ> только пункты меню; он 
же позволит нам изменить цвет пунктов на синий. Шрифт основного текста в этих 
браузерах оставить Тітеѕ Мем Котап. На понимании текста это никак не скажет- 
ся, дизайн же немного пострадает, но это не смертельно. Итак, отдельный пункт 
меню теперь будет выглядеть так: 


<ЕОМТ Ёасе="Агіа1" со1ог="Ы1џе">Пункт меню</РОМТ><ВВ> 


Надо сказать, что при помощи С$$ можно элементарно установить тип гарнитуры 
шрифта для всей страницы и универсально для всех браузеров, но мы договори- 
лись не пользоваться С$$ и применять только средства НТМ!.. 


Нет отступов у первых строк абзацев. Средствами НТМ\. их создать невозможно. 
Придется пока оставить как есть. 


Нет пустых полей внутри ячеек, поэтому текст “прилипает” к краям окна и других 
элементов. Мы можем поставить поля внутри ячейки, указав значение атрибута 
се11радаіпо, но как только мы его зададим отличным от нуля, дизайн поползет. За 
счет появления полей увеличатся по ширине первая и вторая ячейки, и фоновые 
изображения в них начнут повторяться уже не только по вертикали, но и по горизон- 
тали. Нам такие последствия ни к чему. Лучше уж обойтись без отступов совсем. 


Примечание. Замечу, что С$$ позволяет запретить повторение фона по горизонта- 
ли или вертикали, а также безболезненно задать поля для ячеек таблицы — без 
ущерба для внешнего вида НТМІ -документа. 
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В принципе, искусственным путем можно организовать отступы. Основной текст 
можно поместить внутрь вложенной таблицы и для нее уже установить поля. Вы- 
глядеть это будет примерно так: 


<Тр> // начало ячейки, далее встроенная таблица 

<ТАВЬЕ се11райдіпо="10"> //отступы со всех сторон будут 10 пикселей 
<тв> 

<то> 

„. основной код этой ячейки: эпиграф, заголовок, и параграфы текста -. 
</тр> 

</тв> 

</ТАВІЕ> // конец вложенной таблицы 

</Т0> //конец ячейки 
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Пока не будем таким образом задавать отступы, потому что при помощи С88 мы 
сможем это сделать более простым способом. Как это делается, узнаем в следующей 
части книги. Для пунктов меню, чтобы они не приближались вплотную к узору спра- 
ва, можно в конце каждого пункта поставить символ неразрывного пробела. 

<ЕОМТ Ғасе="Агіа1" со1ог="Ы]ше">Пункт меню</ЕОМТ>&ПЬвр; <ВВ> 


Даже после этого пункты меню все еще выглядят не так. Во-первых, они должны 
быть представлены жирным шрифтом, а не обычным. Во-вторых, они должны 
быть ссылками на разделы сайта, т.е. их нужно поместить внутрь элемента А. Тогда 
они окрасятся в синий цвет; это цвет для ссылок по умолчанию, и, казалось бы, 
что из элемента ЕОМТ можно убрать атрибут со1ок="Ъ1ще". Но после того, как 
пользователь щелкнет на ссылке, ее цвет изменится на пурпурный (цвет посещен- 
ной ссылки). Нам же нужно, чтобы пункты меню всегда оставались синими. По- 
этому нужно оформить пункты меню так: 
<А һгеЁ="#"> 

<РОМТ Ғасе="Агіа1" со1ог="Ыџе"><В>Пункт меню</В></РОМТ> 
</А>5пЬзр: <ВЕ> 
Обратите внимание, что вложенность элементов должна быть именно такой. Эле- 
мент ЕОМТ должен располагаться внутри элемента А. Таким образом, сначала по- 
сещенные ссылки окрасятся в пурпурный цвет, а потом опять в синий. Если запи- 
сать элементы в последовательности 
<РОМТ Ғасе="Агіа1"со1ог= "Ь1џе"> 


<А һгеЁ="#">КВ>Пункт меню</В></А> 
</ЕОМТ> 


тогда после посещения ссылки цвет пункта меню все равно будет пурпурный. Мо- 
жете проверить и убедиться, потому что сначала применяются атрибуты элемента 
ҒОМТ, а затем они сменяются атрибутами ссылок. И результат имеет параметры 
ссылки. 


В-третьих, размер текста пунктов меню великоват, поэтому пункт “Научные мате- 
риалы” не умещается на одной строчке. Можно сделать шрифт поменьше, указав 
атрибут 512е="2" в элементе ЕОМТ. Но этого окажется недостаточно, придется 
оставить этот пункт разбитым на 2 строчки. Единственное, что еще осталось, — 
надо задать отступ для слова “научные”, оно сейчас плотно прижимается к краю 
из-за переноса строки. Чтобы они были выровнены одинаково, надо добавить еще 
один символ неразрывного пробела после слова “научные”. После неразрывного 
пробела нужно поставить обычный, иначе вы запретите разрыв этих слов, тогда 
ячейка таблицы увеличит свою ширину, чтобы вместить оба слова, а нам это ни к 
чему. Для этого пункта код будет таким: 
<А НгеЁ="#"> 

<РОМТ Ғасе="Агіа1" со1ог="Ь1е" з12е= 
<В>Научныевирвр; материалы</В> 
</вОМТ> 

</А>&пЫзр; <ВВ> 


2"> 


После оформления пунктов меню ссылками у них появился еще один атрибут — 
подчеркивание, которого нет у них на макете дизайнера. Убрать подчеркивание у 
ссылок только средствами НТМІ. невозможно, но легко можно это сделать при 
помощи С$$. Но раз договорились обойтись только НТМІ.., будем следовать этому 
принципу и оставим ссылки с подчеркиванием. 


Глава 8. Практический пример использования НТМ 159 


Теперь мы исправили все недочеты во второй части, которые смогли. Остался фи- 
нальный аккорд — оформление окончания страницы, т.е. фрагмента 8. С ним все про- 
сто. Делаем еще одну таблицу с одной строкой и единственной ячейкой. Берем фоновое 
изображение Ба Бобсот.9і такого вида, как показано на рис. 8.13. 


Рис. 8.13. Графический файл Ба_Бокеот.с4Е будем использовать $ 
в качестве фона ячейки таблицы, чтобы получить непрерывную полоску. 


Укажем его в качестве фона ячейки таблицы. 
<ТАВЬЕ міасћ="100%"> 
<ТВ> 
<ТР Баскагоипа=" 3падез/Ъч. БоЕкот.94Ё"></ТО> 
</ТЕ> 
</ТАВЬЕ> 

Напишем такой код и ничего не увидим, так как ячейка пустая и ее высота равна ну- 
лю. Чтобы увидеть нужную декоративную полосу, составленную из фонового изображе- 
ния, нужно указать высоту ячейки: 
<ТАВІЕ міаєћ= "100%" везаве="27"> 
<тв> 
<ТО Баскокоцп4=“Зтадез/Ъ9_ЪоЕЕом.94Е"></ТО> 
</ТВ> 
</ТАВЬЕ> 

Еще один вариант рещения — в ячейку поместить нечто, по высоте равное фоновому 
рисунку, тогда она растянется до нужной высоты. Идеально для этого подойдет сам ри- 
сунок Ба_БоЕеом. 91: 
<ТАВІЕ міаєћ="100%"> 
«Т> . 
<Тр Баскдгоциа="Зтадез/Ь9_ЪоЕЕом. ді Е"> 

<ТМС згс="ітадев/Ьа Бобсот.ді є" мідећ="24" Һеісһе="27"> 
</тр> 
</тв> 
</ТАВЬЕ> 

Теперь ячейка не пуста, и у нее появился фон. 

Первый вариант более изящный и простой, но атрибут задает лишь рекоменлуемую 
высоту и может не сработать. Второй способ надежнее, кроме того, рисунок для фона 
идля вставки в ячейку один и тот же, поэтому повторно не будет загружаться, т.е, это не 
увеличит веса страницы, только код второго варианта чуть длиннее, чем первого. 

Теперь дизайн на основе табличного каркаса готов! Трудно было? А представьте, как 
трудно было тем, кто сталкивался с трудностями табличной верстки впервые. 

Радует лишь то, что все браузеры показывают нам сейчас одинаковую картинку, за 
исключением шрифта основного текста страницы. 

По сравнению с макетом, нарисованным дизайнером, у нас осталось три дефекта: 
подчеркивание у пунктов меню, один пункт не помещается в одну строку и нет полей во- 
круг основного текста. В браузере Іпіегпе! Ехріогег 6.0 увидим вот что: 

Окончательный полный НТМ!-код этой страницы смотрите в приложении. Если 
что-то не получилось, сравните свой код с кодом этого примера в приложении, и вы обя- 
зательно достигнете нужного результата. 
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турба мдя д увы 
к полюбит 
бои даму добра, 
озу ма сема воине. 
Фант 


Уважаемый посетитель! 


Мы рады приветствовать Вас на сайте "Желтый Клин", посвященном истории и культуре 
заинцев Нижнего Поволжья: 


новной целью проекта является сбор и представление информации об историко-культурном 
‘аследии и современной жизни украинцев Нижнего Поволжья: 


‘оздатеги сайта ставят перед собой задачу объединения усилий ученых и всех 
езразличных пюдей в изучении и сохранении истории и культуры украинского народа 


рубрике посепения представлена информация об истории засепения украинцами 
| \Нижневолжского края с начала ХУІІ в и до настоящего времени В алфавитном указателе 
{населенных пунктов дана историческая справка о каждом населенном пункте, где украинцы 
составляют основную ипи значительную часть его жителей 


Рис. 8.14. Окончательный вид страницы в браузере. При верстке использовались только воз- 
можности НТМЕ 


Подведем итоги табличной верстки 


При верстке с помощью таблиц желательно разбить код на несколько таблиц. Во- 
первых, потому что так проще писать разметку. Во-вторых, так браузер быстрее выведет 
на экран часть страницы. не дожидаясь пока страница загрузится полностью. 

Необходимо задавать размеры графическим объектам, даже если размеры совпадают 
с реальными, чтобы браузер мог “просчитать” страницу и зарезервировать место под ка- 
ждое изображение. Страница в процессе загрузки не будет “прыгать” и “дергаться”. 

Необходимо. ‘указывать размеры ячеек таблицы, даже если они совпадают с размерами 
помещенных в них рисунков: для четкой стыковки краев изображений, помещенных 
внутрь ячеек. 

Удалите лишние пробелы и символы перевода строк из НТМ!--кода, если необходимо 
расположить изображение вплотную друг к другу. 

В процессе отладки кода включите отображение границ таблицы, чтобы лучше в ней 
ориентироваться. 

Чтобы задать поля для ячеек таблицы, которая служит каркасом дизайна, поместите 
в ячейку вложенную таблицу и задайте для нее поля и отступы. 

Помните о том, что, несмотря на заданную ширину ячеек в пикселях, ячейки таблицы 
могут раздвигаться, чтобы вместить содержимое, выходящее за пределы указанной ширины. 
Поэтому особенно аккуратно пользуйтесь неразрывными пробелами и большими рисунками. 
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Глава 9 


Основы С$$ 


В этой главе ... 

> Зачем содержимое документа отделяется от описания его визуального оформления 
> История развития технологии таблиц стилей 

> Включение С$5 в НТМІ. 


Язык НТМЕ в своем развитии ушел далеко от простого языка разметки. Как вы уже 
знаете, постепенно в него добавлялись элементы и атрибуты, отвечающие за представле- 
ние информации в окне браузера. Примеров можно привести множество: это элементы 
ЕОМТ, В, І, О, атрибуты Басо1ох, аї1ісп и многие им подобные. Но главное — вовремя 
остановиться. Разработчики четко сознали несостоятельность такого подхода и в послед- 
ней версии НТМ!. пометили такие элементы и атрибуты как нежелательные для исполь- 
зования. 

Вскоре была найдена другая технология, позволяющая описывать внешний вид эле- 
ментов, создаваемых языком разметки. В этой части книги мы познакомимся с этой тех- 
нологией — С$$ (Саѕсабіпр Зе Ѕһсеїѕ, Каскадные таблицы стилей). В совокупности 
с НТМЕ она позволяет творить чудеса, и все это благодаря “разделению” труда по созда- 
нию \еБ-страниц. Разметка выполняется строго на основе ОТО для НТМЕ, а визуальное 
оформление элементам придается при помощи С$$. 

Что же такое каскадные таблицы стилей? Стиль — это набор параметров, задаю- 
щий внешнее представление некоего объекта в той или иной среде. Например, ссли 
у нас есть параграф текста и мы хотим поместить его на У\еБ-страницу, то нужно поду- 
мать о том, как он должен выглядеть: какой гарнитурой и размером шрифта должен 
быть набран, как выровнен на странице, какого цвета должны быть буквы и т.д. Если 
этот же параграф нужно воспроизвести через какое-либо аудиоустройство или голосо- 
вой браузер, то тут уже шрифт и цвет роли не играют. Важнее — интонация, тембр, 
громкость, женский или мужской голос и т.д. Параграф при этом все тот же, а вот 
стиль его представления меняется. 

Так как в одном документе встречается множество различных элементов, каждый из 
которых может иметь свой стиль оформления, набор стилей для всех элементов одного 
документа называют таблицей стилей. 

Таким образом, любой документ можно разметить при помощи некоторого языка 
разметки, а затем дополнительно к этому создать несколько таблиц стилей для представ- 
ления этого документа на любом воспроизводящем устройстве: визуальном или голосо- 
вом браузере, на экране карманного компьютера или мобильного телефона. В результате 
мы получаем универсальный документ, который можно будет “просмотреть” на любом 
устройстве, для которого создана соответствующая таблица стилей. 

Каскадными таблицы стилей называют из-за особых правил, согласно которым каждому 
стилю придается вес и значимость. Каскадирование применяется в том случае, если для од- 
ного элемента разными способами задано несколько разных стилей. Принципы каскадиро- 


вания определяют приоритеты применения стилей и тем самым решают конфликтные си- 
туации. Подробнее о каскадировании и отом, как это работает, мы поговорим позднее. 

Как говорится, если обменяться с другом яблоками, то у вас так и останется по од- 
ному яблоку, а если обменяться идеями, то у вас будет уже по две идеи. Если говорить 
о С55 и НТМЕ, то вместе они предоставляют Међ-лизайнерам особенные возможно- 
сти. Во-первых, позволяют более наглядно, без лишних ухищрений реализовать то, что 
возможно и в НТМІ., но с использованием нежелательных атрибутов или дополни- 
тельных хитростей, как, например, применение вложенных таблиц для создания цвет- 
ных границ у таблицы. Во-вторых, каскадные таблицы стилей позволяют задавать та- 
кие параметры представления объекта, которые совершенно невозможно организовать 
средствами НТМІ., — например, убрать подчеркивание у ссылок или сделать отступ 
красной строки в абзаце. 


Зачем содержимое документа отделяется 
от описания его визуального оформления 


В этом разделе мы постараемся разобраться, для чего же нужно изучать С$$ и какие ре- 
альные преимущества и удобства это нам может дать. Для начала введем несколько опреде- 
лений, чтобы каждый читатель одинаково понимал значение слов “содержимое” и “ви- 
зуально оформление”. 

Содержимое НТМ!-документа — это текст, рисунки, таблицы и другие элементы, 
! формирующие смысловое наполнение документа. “| 


Часто в качестве аналога используют термин, заимствованный из английского язы- 
ка, — “контент”. 
| Визуальное оформление определяет взаимное расположение объектов на странице, 
| их внешний вид: размер шрифта, цвет, наличие рамок и другие параметры, не отно- 
| сящиеся непосредственно к содержимому документа. 


Существует и более общее определение: дизайн как способ представления информа- 
ции на произвольных устройствах. Так как мы говорим о представлении информации на 
экране компьютера, то это визуальное представление. Для голосовых устройств это будет 
речевое представление. 

Думаю, вы согласитесь, что мысль, которую выражает параграф текста, не изменится 
от того, что цвет его шрифта изменили с красного на зеленый. Но дизайн при этом меня- 
ется. По своей природе содержание и визуальное представление — разные вещи, кото- 
рые должны существовать независимо друг от друга. Посмотрим, как дела обстоят на са- 
мом деле. 

Язык НТМЕ изначально был создан для использования в научных кругах. Все, что от 
него требовалось, — представлять текстовую информацию. Когда же НТМІ. вышел за 
рамки такого узкого применения, запросы пользователей резко возросли. Возможностей 
языка НТМЕ стало катастрофически не хватать. Использование кода, написанного при 
помощи таблиц, регулирование отступов путем добавления пустых прозрачных 
картинок — все это с трудом подчиняется логике, трудно воспринимается и тяжело ре- 
дактируется. Кроме того, чтобы изменить внешнее представление документа с подобны- 
ми “особенностями”, зачастую его код приходится полностью переписывать. 
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Рассмотрим пример представления на М№еб-странице небольшого по объему солержи- 
мого, представляющего электронную открытку — ее можно отправить другу по элек- 
тронной почте как по поводу, так и без него. Как правило, каждая такая открытка содер- 
жит типичный набор элементов: тема или повод (с Днем рождения, с Новым годом и то- 
му подобное), обращение (Дорогая мама!), текст открытки (Поздравляю, желаю...), 
подпись (Твой сын Петя) и некоторое графическое изображение. Расположить эти эле- 
менты или части текста на странице можно по-разному. Для разных частей может потре- 
боваться задать различные гарнитуру шрифта, размер и цвет. Чтобы реализовать все это 
при помощи языка НТМЕ, потребуется создать таблицу, в ячейки которой и поместить 
‘соответствующее содержимое. Гарнитуру и размер шрифта можно задать только при по- 
мощи элемента РОМТ. Например, одно из представлений открытки можно реализовать 
при помощи такого кода. 


<ТАВІЕ мідћ="500* а119п="сепьек"> 

<ТВ> 

<ТО со1зрап="2"> 

<Н1 а1ідт="сепбег"> 

<ЕОМТ $12е="6" со1ог="гей">С днем рождения! </ЕОМТ> 

</н1> 

</тр> 

</тВ> 

<ТВ> 

<тр> 

«ІМС вгс="1тадез/сага.91Е" міасһ="175" һеісћс="200° а1Е="“открытка с днем рож- 
дения"> 

</т0> 

<ТО уа119п="Кор"> 
<н2> 

<РОМТ Ғасе="Агіа1" зізе= 
</н2> 

<Р> 

<РОМТ Ғасе="Атіа1" со1ох=“тагооп“>Поздравляю тебя с днем рождения! <ВЕ> 
Желаю чаще улыбаться, <ВЕ> 

Быть красивой и счастливой! </ЕОМТ> 

</Р> 

</то> 

</ТВ> 

<тв> 

<ТО соЇзрап="2" а149п=“кзаве“> 

<ЕМ> 

<ЕОМТ Ғасе="Агіа1" соІог="ршгр1е">Твой сын Петя</Ёопё> 

</ЕМ> 

</то> 

</тв> 

</ТАВІЕ> 


5" со1ок="риср1е">Дорогая мама! </ЕОМТ> 


Визуально в окне браузера такой код будет выглядеть так, как показано на рис. 9.1. 

Тема открытки “С днем рождения!” написана шрифтом Тітеѕ Мем Котап (это зна- 
чение по умолчанию), цвет шрифта пришлось изменить на красный, а размер на 6 по 
сравнению с обычным размером заголовка первого уровня. Обращение “Дорогая мама” 
и весь остальной текст открытки оформлен шрифтом Апа|, размер установлен 5, цвет 
пурпурный. Для остального текста открытки используется размер шрифта 3, т.е. тот, что 
используется по умолчанию, поэтому явно в элементе ЕОМТ он не указан. Явно прописы- 
ваются только цвет и гарнитура шрифта. Как видите, довольно простой и по компоновке, 
и по содержанию фрагмент, а код уже довольно сложен. 
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отарытка ва 


 Поздравительн. 


Г = 
УЕ ® Га еиомикывыы азе) 3 - 


ноте воде тоату анеявяе 


С днем рождения! 
Дорогая мама! 


Е 
ЕЎ. полозтнотобнсдюн 


( рождения! 
Жепаю чаще улыбаться, 


Быть красивой и счастливой! 


с на» > 


Твой сын Петя. 


Рис. 9.1. Вид открытки в браузере Мозга 


Если нам понадобится незначительно изменить внешний вид и структуру этого доку- 
мента, например поменять местами картинку и поздравление, для всего текста устано- 
вить гарнитуру Уегдапа, изменить цвета открытки и перенести подлись влево, то придет- 
ся довольно значительно менять код. Он теперь будет таким: 


<ТАВЬЕ мідсћ="500* а1ісп="сепсег"> 
<ТН> 

<ТР со1зрап="2"> 

<Н1 а]ісп="сепсег"> 

<ЕОМТ Ёасе="Уегдапа" віге="6* со1ох=“Ь1ие">С днем рождения!</РОМТ> 
</н1> 


<Т0 уаіісп="Еор"> 
<н2> 

<РОМТ Ёасе="Уегдапа" з1хе="5“ со1ог="ригр1е">Дорогая мама! </ЕОМТ> 

</н2> 

<Р> 

<ЕОМТ Ғасе="ҮегдӢапа" со1ог="Ь10џе">Поздравляю тебя с днем рождения! <ВЕ> 

Желаю чаще улыбаться, <ВЕ> 

Быть красивой и счастливой! </РОМТ> 

</в> 

</тр> 

<тр> 

<1МО ѕгс="іладеѕ/сага.9іҒ" міаеһ="*175" пезове="200" а1Е=“открытка с днем рож- 
дения"> 


<ТР со1зрап="2" а119п="1еЕЕ"> 
<ЕМ> 
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<РОМТ Ғасе="үегдапа" со1ог="ригр1е">Твой сын Петя</ФопЕ> 
</ЕМ> 
</тр> 
</тв> 
</ТАВЕЕ> 


Открытка будет выглядеть так, как показано на рис. 9.2. 


Поздравительная открытна мона. 


Бе ЕЖ үен бо Воілайз Тоон Мон В | 
т 3] вена) 88 – (Ш 
7 унете | Моодтайе тонна ней вже | 


С днем рождения! 
Дорогая мама! 


9, 
Поздравляю тебя с днем Е а Е 


рождения! 

Желаю чаще улыбаться, 
Быть красивой и 
счастливой! 


<= 


Твой сын Петя 


Рис. 9.2. Вид измененной открытки, описанной с помощью НТМІ. 


Таким образом, чтобы изменить дизайн страницы, требуется полностью или частично. 
переписать код. Это неправильно, поскольку содержимое страницы не менялось, нам 
лишь потребовалось изменить внешнее его представление в окне браузера. 

При использовании С$$ каждый элемент содержимого страницы можно поместить. 
внутрь структурного блока рту и разместить на странице нужным образом. Например: 


<0Іу ій="сага"> 
<Н1>С днем рождени; 
<0ІУ ід="саа ілю" 
<ІМО ѕгс="іпадеѕ/сага.сдіё" міасһ="175" Һеідһ="200" а1&=“открытка с днем 
рождения"> 
</01у> 
«01у ід="сага сехе"> 
<Н2>Дорогая мама! </Н2> 
Поздравляю тебя с днем рождения! <ВВ> 
Желаю чаще улыбаться, <ВВ> 
Быть красивой и счастливой! 
</рту> 
<ОТУ ій="саға ашсћог"> 
Твой сын Петя 
</0ту> 
</0ту> 


1</н1> 
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Согласитесь, что такой код воспринимается гораздо лучше и понятнее, чем прелылу- 
щие два примера. Каждый блок имеет свое уникальное имя, заданное атрибутом ід, имя 
отражает смысл содержимого блока, чтобы легче было ориентироваться. А визуальное 
представление для содержимого каждого блока информации, его расположение на стра- 
нице может быть задано при помощи таблицы стилей. И если придется его изменить, то 
менять структуру документа уже не потребуется — достаточно будет изменить только 
описание таблицы стилей. Гораздо удобнее, не правда ли? 

Для приведенного выше кода можно написать соответствующую таблицу стилей 
и поместить в секцию НЕАР НТМІ -документа. Сделаем это, по ходу делая необходимые 
комментарии, чтобы смысл описываемых стилей был понятен. Сразу уточним: коммен- 
тарии в С55 помещаются между парами символов “ /” и “+” (/* — начало комментария, 
*/ — конец комментария). 
<5ТҮІЕ суре="КехЕ/свз"> 
/* Задаем ширину блока открытки, равную 500 пикселей */ 


#сага{ 
мідећ:500 рх; 


/* Задаем стиль оформления для заголовка первого уровня: цвет красный, шрифт 
Уегдапа, жирный, размер 18 пунктов; выравнивание по центру */ 
ні( 

со1ог: гед; 

Ғопс: Ьо1а 18р Уегдапа, ѕапз-ѕегіѓ; 

Сехі-а1ісп: сепсег 


/* Задаем стиль оформления для заголовка второго уровня: цвет пурпурный, 
шрифт Үегдапа, жирный, размер 16 пунктов; выравнивание не задано, значит, по 
умолчанию будет использовано выравнивание по левому краю */ 
н2{ 

со1ог:ршр1е; 

Ғопе: Бо1а 16рс Уегдапа, ѕапз-ѕегіё; 
} 
/* Задаем описание блока для текста открытки: это плавающий блок, который 
прижимается к левому краю окна, цвет шрифта, шрифт Уегдапа, размер 12 пунктов 
т 
#сага сехе( 
со1ог: пагооп 

Е1оаЕ: Іеғс; 

ЕопЕ: 12ре Уегдапа, ѕапе-ѕегіё; 


/* Задаем описание блока для изображения открытки: это плавающий блок, кото- 
рый прижимается к левому краю окна, следом за другими такими блоками, т.е. 
примыкает слева к блоку текста */ 
#сага іп 

Е10ас:1еўе 


/* Задаем описание блока подписи открытки: это блок, который прижимается к 
левому краю окна, цвет шрифта пурпурный. шрифт Мегдапа, размер 12 пунктов */ 
#сага_ацЕВох{ 

с1еаг: 1еЁЕ; 

соїог: ршр1е; 

Ғопс: ісаїіс 12ре Уегдапа, запз-вег1Е; 

Сехс-а1ісп: клаве 


} 
</5ТҮІЕ> 


На первый взгляд написание такого кода не кажется проще, поскольку, кроме раз- 
метки, нужно создать еще и таблицу стилей. Но следует учесть, что при этом улучшается 
логичность кода, и в результате его будет гораздо проще редактировать: для того чтобы 
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изменить внешний вид страницы, достаточно просто отредактировать таблицу стилей, 
саму структуру документа изменять не придется. Кроме этого, во многих случаях исполь- 
зование НТМІ совместно с С55 позволяет значительно сократить размер кода. 


История развития технологии таблиц стилей 


Таблица стилей представляет собой набор свойств, записанный в виде правил, кото- 
рые определяют, как некоторый элемент НТМІ. должен выглядеть в окне браузера или на 
другом устройстве вывода. 

Первая версия С5$ стала официальным стандартом 17 декабря 1996 года. В то время 
в России об Интернет слышали только единицы, а имели постоянный доступ к нему еще 
меньшее число людей. Первым браузером, который начал поддерживать С$$ 1. была тре- 
тья версия Имегпе! Ехр|огег, что немало способствовало росту его популярности. Но вто 
время этим браузером поддерживались далеко не все возможности С$$ 1, и только в чет- 
вертой версии И\мегпеё Ехріогег ситуация была исправлена. Компания М !5саре ввела 
поддержку С$$ только начиная с четвертой версии своих браузеров. Браузер Орега начал 
поддерживать каскадные таблицы начиная с пятой версии. Подытоживая, можно ска- 
зать, что технологию С$8 поддерживают браузеры Іпісгпеї Ехріогег 4.0, №еіѕсаре Мамва- 
{ог 4.0 и Орега 5.0, нуи, естественно, более поздние версии этих браузеров. 

Создателям \УМеб-страниц в своей работе всегда приходится ориентироваться на брау- 
зеры, а точнее на то, какую поддержку нововведений в технологии С$5 они поддержива- 
ют. Можно писать сколь угодно сложные таблицы стилей, используя все возможности 
этой технологии, но зачем все это делать, если пользователь их все равно не увидит? В ре- 
зультате у разработчиков УМеБ-страниц появилась еще одна головная боль — написание 
кроссбраузерного С$$. 

Первая реализация С$$ в браузере Іліегпе! Ехрюгег 3.0 не была совершенной, но тем 
не менее поддерживались следующие свойства: управление шрифтом, выравниванием и 
подчеркиванием текста, фоновым изображением и его повторением, регулирование вы- 
соты строки и настройка отступов. 

Как видите, этого уже было бы достаточно, чтобы решить большинство задач из на- 
шего примера с открыткой и примера с табличной версткой сайта из предыдущей главы. 
В общем-то, большинство создателей МеБ-страниц пользуются примерно таким же на- 
‘бором возможностей, комбинируя, например, табличную верстку с использованием тех- 
нологии С$$ для настройки тех параметров, которые не доступны в НТМ!.. 

В то время корпорация Мисгозой явно сделала ставку на С$$ и одной из первых включила 
поддержку стилей в свой браузер, еще до того как эта технология стала стандартом. Однако 
надо сказать, что бурное развитие поддержки С$$ в браузере 1тегпе! Ехрюгег продолжалось не 
очень долго. На сегодняшний день Іпќегпеї Ехріогег 6.0, пожалуй, хуже других браузеров пол- 
держивает таблицы стилей. Разработчики из Місгоѕоћ, видимо, делают ставку на развитие 
языков ХМЕ и технологии Х$1. (еЖепзЫе Зе 1 априаре, Расширяемый язык стилей). 

В четвертой версии Имегпег Ехріогег были сделаны существенные дополнения — по- 
мимо того, что были исправлены некоторые ошибки. Были добавлены новые свойства, 
появилась возможность использовать несколько таблиц стилей на странице и подклю- 
чать их с помощью директивы @1проге. Также в четвертой версии ТЕ была впервые реа- 
лизована блоковая модель и параметры позиционирования блоков на странице. Появил- 
ся псевдокласс Һоуег, позволяющий настраивать внешний вид ссылок в момент наведе- 
ния на них указателя мыши и некоторые другие возможности. Однако общее количество 
ошибок в реализации при этом не уменьшилось. 

Пожалуй, самым значимым нововведением стала поддержка блоковой модели. Вы, 
наверняка, видели ее в действии на многих сайтах, где реализовано раскрывающееся ме- 
ню, наподобие раскрывающихся меню в Мїпӣомѕ, которые появляются при щелчке на 
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кнопке Пуск или названии меню в окнах программ. При помощи блоков С$5 содержи- 
мое пунктов такого меню помещается в отдельные блоки, которые позиционируются на 
странице в нужное место и делаются невидимыми. Затем, по мере необходимости, при 
помощи операторов языка ЈауаЅсгірі включается видимость нужных блоков, чем и созда- 
ется иллюзия раскрывающегося меню. 

После выхода пятой версии браузера Гиегпе: Ехрюгег он стал абсолютным лидером 
в использовании. На пике популярности его использовали около 75% пользователей Ин- 
тернет. Браузеры корпорации Місгоѕоћ и по сей день являются лидерами, ими пользуют- 
ся более 90% пользователей. При этом доля Ииегпег Ехріогег 5.х до сих пор не менее 18%. 
Лидер же — шестая версия этого браузера. 

Нововведений в плане С$$ пятая версия 1Е принесла уже не так много, и все они не 
были существенными. Появились два новых псевдокласса. Первый, Еігѕё-1есбег, по- 
зволяет создавать буквицы — это особое оформление первой буквы параграфа. Такой 
прием часто использовался в старых рукописных книгах, когда первые буквы были само- 
стоятельными произведениями искусства, расписывались драгоценными металлами: з0- 
лотом и серебром. Второй псевдокласс — Е1к5Е-11пе, с его помощью можно задавать 
оформление первой строки параграфа. Усилился контроль над фоном страницы, появи- 
лась возможность увеличивать объекты на странице и видоизменять полосу прокрутки. 
Незначительно. улучшилась блоковая модель и усилился контроль над таблицами — те- 
перь таблицы с фиксированной шириной могли обрабатываться быстрее. 

12 мая 1998 года была принята спецификация С$$ 2, в которой появились новые ти- 
пы селекторов, новые свойства, предоставляющие более широкие возможности разра- 
ботчикам У\еБ-страниц. 

Ожидалось, что в новой, шестой версии Іліегпе! ЕхрІогег поддержка С$$ будет более 
широкой. В какой-то мере эти ожилания оправдались, поскольку в иегпе! Ехр!огег 6.0 
осуществлялась полная поддержка С$$ | и была исправлена блоковая модель, а также 
был усилен контроль над таблицами и улучшено позиционирование элементов. Появи- 
лось два новых свойства, позволяющих регулировать расстояние между словами (иох4- 
ѕравіпа), и свойство міп-Һеісће, задающее минимальную высоту блока, которая не 
может быть меньше заданной ни при каких условиях. 

Это были все нововведения в отношении поддержки С$$, зато улучшилось качество 
самого браузера. Как уже говорилось ранее, разработчики “заморозили” поддержку С$$, 
сделав ставку на развитие расширяемых языков разметки и стилей: ХМЕ и ХЅІ.. 

Ближайшими конкурентами браузеров от Мюгоой в столь отдаленном прошлом были 
браузеры от фирмы Мезсаре, которые в настоящее время значительно уступили свои 
позиции — преимущественно по причине запоздавшей реализации поддержки С$$. На сего- 
дняшний день браузерами №еіѕсаре пользуются не более 3-4% пользователей. Лидером среди 
браузеров данного класса является Моа, который на сегодня лучше всех поддерживает С$$, 
но из-за его малой распространенности воспользоваться этим преимуществом не удается. 

В третьем классе браузеров (от компании Орега Зой\аге), которыми сейчас пользуются 
около 4% пользователей, поддержка С$$ была реализована начиная с версии 3.5, и эта реа- 
лизация была довольно хорошей. Уже в версии 4 браузера Орега, вышедшей в 2000 году, 
была реализована полная поддержка стандарта С$$ 1 и частичная — стандарта С$$ 2. 
В следующих версиях поддержка С5$ развивалась уже слабо, но, что касается С$$ 2, имен- 
но браузеры Орега и МогШа считаются в этом отношении лучшими. Однако учитывая их 
незначительную распространенность, создателям Меб-страниц всегда приходится ориенти- 
роваться на возможности наиболее популярных ‘браузеров и принимать во внимание, какую 
именно поддержку нововведений в технологии С$$ они поддерживают. Можно писать 
сколь угодно сложные таблицы стилей, использовать все возможности каскадных таблиц 
стилей, но зачем все это делать, если пользователь их все равно не увидит. 
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Возможности С$$ 1 


Первая реализация таблиц стилей предоставляла возможность выбора элемента, к ко- 
торому применяется стиль по следующим признакам. 
• К любому элементу заданного типа, например ко всем заголовкам Н1. 


• К определенному классу элемента. Класс определяется заданием атрибута с1азз 
внутри элемента НТМЕ. 


<Р с1аѕѕ="Ы1џе">Текст параграфа будет синим</Р> 


е К уникальному элементу, определенному идентификатором внутри элемента 
НТМЕ при помощи атрибута іа. 


<Н1 ід="ипісие">Уникальный заголовок</Н1> 


• К элементам, находящимся непосредственно внутри другого элемента (или в кон- 
тексте другого элемента). Например, для всех элементов ЭТВОМ, находящихся 
внутри элемента параграфа, можно задать выделение не жирным шрифтом, а 
красным цветом. 


<Р>Можно задать < ЅТКОМО >выщеление</5ТВОМС> внутри текста</Р> 
е К первой букве элемента, т.е. создавать буквицы. 

е К первой строке элемента. 

• К активным, посещенным и не посещенным ссылкам. 

Блоковая модель была реализована таким образом, что позволяла задавать: 
• размеры блоков; 

~ размеры отступов, полей и рамок; 

• тип и цвет рамок; 

• позиционирование блоков: выравнивание и обтекание текстом. 


Для управления шрифтом были доступны такие параметры: 
• начертание и насыщенность (степень жирности); 

• размер в разных единицах измерения; 

• гарнитура шрифта. 


Можно было устанавливать цвет фона и фоновое изображение для страниц и отбель- 
ных блоков, управлять его повторением по горизонтали и вертикали, а также помещать 
фоновое изображение в любую точку экрана, задав координаты этой точки. Это невоз- 
можно было сделать с помощью средств только НТМІ.. 

Для текстовых блоков можно устанавливать свойства оформления, регулировать рас- 
стояние между словами и высоту строки, задавать выравнивание и цвет текста. 

Для списков можно устанавливать тип маркера и использовать в качестве маркера 
любое графическое изображение, подключаемое из файла. 


Возможности С$$ 2 


Стандарт С$$ 2 основывается на С$$ | и дополняет его некоторыми свойствами и ме- 
ханизмами, позволяющими в значительной степени отделить структуру НТМІ- 
локумента от его визуального оформления. Жаль только, что самый распространенный 
браузер Іліегпег ЕхрІогег не поддерживает все эти свойства в полной мере. Итак, какие же 
дополнительные возможности появились в С55 2? 
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Появилась возможность писать таблицы стилей для различных устройств, указывая 
тип устройства в атрибуте шедіа. Поддерживаются различные типы устройств: голосо- 
вые браузеры, браузеры для слепых на азбуке Брайля, проекторы, печатающие устройст- 
ва и карманные компьютеры. 

Появились новые возможности выбора элемента, к которому применяется стиль. Кроме. 
тех, что были в С$$ 1, добавилась возможность применить стили к следующим элементам. 


• К элементу, обладающему фокусом ввода, или к элементу при наведении на него 
курсора мыши. 


® К элементу, который является прямым потомком другого элемента в дереве эле- 
ментов. 


• К группе элементов, имеющих одинаковые атрибуты. Например, ко всем элемен- 
там, имеющим заданный атрибут в открывающем теге, или же к элементам, 
имеющим одинаковые значения некоторого атрибута, — скажем, ко всем элемен- 
там, выровненным по центру (а1ісп="сепбег"). 


~ Ко всем элементам сразу, благоларя ввелению универсального селектора, который 
обозначается символом звездочка (*). 


Управление шрифтами на странице позволяет теперь скачивать недостающие шриф- 
ты с сервера, что позволяет значительно расширить перечень используемых в работе 
шрифтов. Это, соответственно, может уменьшить количество графических элементов на 
странице с надписями, написанными декоративными или нестандартными шрифтами. 
Теперь такие надписи можно оформлять в виде текста, а если у пользователя нет нужного 
шрифта, его можно скачать. Это должно способствовать уменьшению веса страниц. 

Появилась возможность изменять вид курсора, например, при наведении его на не- 
кий элемент и использовать собственные графические изображения вместо стандартных 
курсоров операционной системы. 

Улучшилась блоковая модель, стало возможным более точно размещать блоки на 
странице, делать их невидимыми и появились другие возможности. 

Начиная с 2000 гола в разработке находится стандарт С$$ 3, однако эта работа до сих 
пор не завершена, и не ясно, будет ли она завершена вообще, поскольку ее завершение 
ожидалось еще в 2003 году. Еще более туманные перспективы относительно реализации 
поддержки этого стандарта браузерами. Хотя С$$ 3 предполагает введение достаточно 
‘удобных функций и возможностей, описывать их, я думаю, пока преждевременно, по- 
скольку даже возможности С$$ 2 поддерживаются. к сожалению, не в полной мере. 

Перейдем от слов к делу и рассмотрим, каким образом можно добавить в НТМЕ- 
документ таблицу стилей. 


Включение С$$ в НТМІ. 


Таблица стилей может быть написана не только на языке С$$, но и на каком-либо 
другом, например ХЅІ.. Для установки языка таблицы стилей по умолчанию используется 
элемент МЕТА. Как вы помните, этот элемент задает разного рода служебную информа- 
цию и располагается в секции НЕА”: 
<НЕАО> 

<МЕТА Һсєр-едиіу="Сопсепе-5су1е-Туре" сопкепе="ЕехЕ/свз"> 
</НЕАР> 

Атрибут ҺСер-есоіу="Сопсепс-5су1е-Туре" указывает на то, что данный эле- 
мент МЕТА относится к таблице стилей, а атрибут сопбепі="бехі/с=ѕ" показывает, 
что таблицы стилей будут написаны на языке С$$. 
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Чтобы разобраться, как добавляются стили в НТМЁ-локумент, давайте вернемся 
к примеру самого первого документа, который мы создали в процессе изучения НТМІ. На- 
помню, это была страничка с описанием строительной фирмы “Дом”. Выглялела она так: 


<100СТҮРЕ НТМЬ РОВЬТС "-//иЗС//рто НТМЕ, 4.0//ЕМ" 
"Беер: //иууг.ыЗ .оо/ТВУВЕС-БЫт140/1005е.45а"> 
<нтм> 
<НЕАЮ> 
<ТГТЬЕ> Строительная фирма "Дом": о нас</ТЕТЬЕ> 
</НЕАО> 
<ворү> 
<Н1 а1ісп="сепсег"> Строительная фирма "Дом" </Н1> 
<Р>Фирма "Дом" образовалась в 1998 году и с тех пор занимает лидирующее 
место на рынке строительства и отделочных материалов. </Р> 
<Р>Фирма имеет сеть магазинов и торговых залов, расположенных в разных 
районах города. В них вы можете найти все для вашего дома, начиная с отделоч- 
ных материалов и заканчивая мебелью и аксессуарами. </Р> 
</вору> 
</нтмі> 


Предположим, что нам захотелось изменить цвет заголовка с черного, каким он сей. 
час является, на зеленый. Тогда мы можем написать дополнительный атрибут, задающий 
стиль оформления непосредственно в элементе Н1: 
<Н1 а1ідп="сепбег" збуІе="со1ог:дгееп"> Строительная фирма “Дом"</Н1> 


Атрибут зЕу1е может использоваться в любом элементе НТМІ. для задания его стиля 
оформления. В кавычках указывается правило С$$, описывающее, какое оформление 
должен иметь элемент. В данном случае задается цвет (со1ог) и указывается конкретный 
цвет (дгееп — зеленый). В качестве разделителя параметра и его значения в С$$ ис- 
пользуется двоеточие. 


Внутренние таблицы стилей 


Таблица стилей, заданная внутри элемента НТМ!. при помощи атрибута эеу1е, на- 
зывается внутренней. 
<Н1 вбу1е="со1ог:дгееп"> Зеленый заголовок</Н1> 


Нелостаток внутренних таблиц стилей заключается в их неуниверсальности. В резуль- 
тате использования атрибута ѕсу1е только один заголовок в документе станет зеленым. 
Для остальных придется точно так же задавать атрибут зЕу1е либо следует создать 
встроенную таблицу стилей. 


Встроенные таблицы стилей 


Встроенные таблицы добавляются в НТМІ -документ между тегами ТҮГЕ в секции 
НЕАР документа. Например, чтобы сделать все заголовки первого уровня зелеными, 
можно написать такую встроенную таблицу: 
<5ТҮГЕ буре="бехі/сез"> 
ні 
со1ог:бгееп 
} 

</5тҮШЕ> 

В результате для всех элементов Н1, которые встретятся в ланном НТМЕ-локументе. 
будет применен зеленый вы 


Замечание. Чтобы в элементе ЅТҮГЕ указать, что это именно Е стилей С58, 
нужно задать атрибут буре=" сехЕ/сзз". Если значение по умолчанию для таблиц 
стилей уже задано элементом МЕТА, атрибут уре в этом ислучае м можно опустить. 
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Если вы решите изменить цвет заголовков на синий, то при использовании внутрен- 
них таблиц стилей название цвета придется менять внутри всех атрибутов зеуТе во всех 
заголовках Н1. При использовании встроенных таблиц цвет достаточно будет изменить 
всего один раз. Согласитесь, что это удобнее. 

Рассмотрим такую ситуацию, когда в элементе ЅТҮІГЕ для цвета заголовка задан зеле- 
ный цвет: 
<5ТҮІЕ> 

НІ (со1ок:дкееп} 
</8ТҮЕ> 
а внутри самого заголовка указано: 
<Н1 збу1е="со1ог:Ь1џе">Какого цвета будет заголовок?<Н1> 


В этом случае и будет применен принцип каскадирования, который позволит разре- 
шить конфликт и однозначно выбрать, какого же ивета должен быть заголовок: синего 
или зеленого. В данном случае высший приоритет имеет внутренняя таблица стилей 
(=су1е-"со1ог :Ь1џе"), поэтому заголовок будет синим. 

Рассмотрим еще один атрибут элемента ТҮГЕ, задающий тип устройства, для кото- 
рого предназначена таблица стилей. Это атрибут тедіа. В качестве его значений допус- 
тимы следующие. 


• зскееп — для экранов компьютеров, не разделенных на страницы (в отличие от 
вывода на печать, где деление на страницы происходит обязательно). 

• Соу — для носителей с фиксированным размером символов, таких как телетайпы, 
терминалы или переносные устройства с ограниченными возможностями отобра- 
жения. 

• су — для устройств типа телевизора (т.е. с низким разрешением и ограниченными 
возможностями прокрутки). 

® ргојесбіоп — для устройств типа проекторов. 

• Һапаһе1а — для устройств типа карманных компьютеров или мобильных теле- 
фонов (небольшой экран, монохромный дисплей или ограниченный диапазон 
цветов, растровая графика). 

ө ргіпе — для устройств вывода на печать, работающих постранично, или для доку- 
ментов, просматриваемых на экране в режиме предварительного просмотра печати. 

• Бга111е — для тактильных устройств с алфавитом Брайля (для людей с ослаб- 
ленным зрением). 

~ ацга1 — для синтезаторов речи. 


• а11 — для всех устройств. 
По умолчанию используется значение ѕсгееп, т.е. изначально таблицы стилей ори- 


ентируются на экран компьютера. В качестве значения могут быть указаны одно устрой- 
ство или их список, разделенный запятыми. 


Внешние таблицы стилей 


А теперь представьте, что вы создаете сайт, в котором десяток страниц и каждая стра- 
ница должна иметь таблицу стилей, задаюшую ее оформление. Как мы уже говорили 
раньше, все страницы одного сайта зачастую выглялят одинаково, а значит, для их 
оформления применяются подобные таблицы стилей. Чаще всего сайт имеет всего одну 
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таблицу стилей, описывающую все его элементы. Чтобы не дублировать всю эту таблицу 
между тегами <5ТҮІЕ> и </5ТҮГЕ> на каждой У\еБ-странице, ее можно поместить в от- 
дельный файл с расширением .сѕѕ и подключать к НТМІ.-документу при необходимо- 
сти. Такие таблицы стилей называются внешними. 

Преимущество внешних таблиц заключается в том, что, однажды загрузив ее, браузер 
кэширует информацию и при повторной загрузке берет ее не с М№еЬ-сервера, а с локального 
диска. Таким образом, при загрузке страниц МеЬ-сайта с одной таблицей стилей мы эконо- 
мим на времени загрузки внешней таблицы стилей, т.е. содержащего ее файла . се. Второе 
преимущество — опять же удобство редактирования таких страниц. Достаточно исправить 
стиль оформления элемента в одном месте — в файле, содержащем таблицу стилей, и на 
всех НТМІ -страницах, использующих эти стили, внешний вид элементов изменится. 

Как вы уже знаете, для этих целей используется пустой элемент ІМК, который рас- 
полагается в секции НЕАР. Рассмотрим пример, когда нам нужно подключить к НТМІ.- 
документу таблицу стилей, находящуюся в файле ѕсу1е.сѕѕ. 
<ЫІМК Һгеғ-"ѕбу1е.свв" ге1="=бу1есһеес" гуре="ЕехЕ/св5"> 


Согласно спецификации НТМІ., авторы сайтов могут подключать к одному документу 
несколько внешних таблиц. Они могут взаимно дополнять друг друга, тогда для определе- 
ния свойств объектов используется принцип каскадирования. Он начинает лействовать в 
том случае, если в нескольких таблицах задано описание для одного и того же элемента. 

Таблицы могут быть составлены так, что будут взаимно исключать друг друга, в этом 
случае они называются альтернативными, т.е. пользователь может выбирать, какой таб- 
лицей воспользоваться. Например, для вывода на устройства с ограниченной шириной 
можно пользоваться шрифтами поменьше. А для люлей с ослабленным зрением можно, 
наоборот, увеличить размеры шрифта и оформить это в виде отдельной таблицы стилей. 
Автор при этом имеет возможность указать, какая из таблиц является предпочтительной. 
Описание и назначение каждой таблицы стилей задаются в атрибуте сі с1е. Это было бы 
улобно: заходишь на сайт, смотришь, какие таблицы стилей для него написаны, подби- 
раешь наиболее подходящую для себя и пользуешься ею. Но для этого браузеры должны 
предоставлять возможность выбора предпочтительной таблицы стилей. 

Такой выбор предоставляют только браузеры Месаре версии 6.х (и МогШа соответ- 
ственно), Орега 5 и старше. Они предоставляют возможность увеличения размера шриф- 
та, даже если он задан в пикселях. Так что, по сути, альтернативные таблицы стилей и не 
нужны. Іл‹егпе! Ехріогег, хоть и самый распространенный браузер, но не предоставляет 
такой возможности, Размер шрифта он позволяет увеличить только в том случае, если 
шрифт задан при помощи ключевых слов или с помощью стандартных размеров языка 
НТМЕ, т.е. чисел от 1 до 7. Наверное, поэтому разработчики и не пишут несколько аль- 
тернативных таблиц. 

Теперь вернемся к элементу ІМК. 
<ІМК Һгеѓё="вбу1е.сэз" ге1="=СуІеѕһеес" буре="сехс/сѕѕ"> 


Атрибут Һхе# обязательно должен присутствовать и в качестве значения содержать 
УВЕ подключаемой таблицы стилей. 

Атрибут ке1 указывает, какое отношение имеет подключаемый файл к данному 
НТМЕ-документу. Чтобы добавить основную таблицу стилей, используется значение 
зеу1езВеек, при этом описание в атрибуте Е1Е1е задавать не нужно. Для того чтобы из 
множества альтернативных таблиц можно было выбрать предпочитаемую пользователем, 
укажите атрибут се1="зЕу1езНеек" и задайте ес описание в атрибуте сі Е1е. Чтобы за- 
дать альтернативную таблицу стилей, задайте атрибут ге1="а1 сегпасе зеу1езвеес" 
и описание в атрибуте с1Е1е. 
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Вот несколько примеров: 


< МК ге1="а1еегпаее эсу1евнеек” ріс1е="мелкий шрифт" ВкеЁ=“зща11-Еопе.с88" 
Буре="ЕехЕ/сзз"> 


Эта строка подключает альтернативную таблицу стилей с более мелким размером шриф- 
та, таблииа хранится в файле ѕта11-Ғопе.сѕѕ. 


«ІМК ге1=*а1бегпабе зсу1езћееб" бібЛе=" средний шрифт" Һгеғ="педішп- 
Ғопъ.сѕѕ" Суре="ЕехЕ/сз5"> 


Такая строка подключает альтернативную таблицу стилей со средним размером шрифта. 
таблица хранится в файле тедіот- опе .с55. 


<ІМК ге1="а1сегпасе зсу1еѕћеес" сіс1е="крупный шрифт" Нгеё="Ь19-Еопе.сз3" 
суре="ЕехЕ/сз5"> 


С помощью этой строки подключается альтернативная таблица стилей с самым большим 
размером шрифта, таблица хранится в файле 51 9-ЕопЕ .с55. 
кехЕ/сзз"> 


<ЬЛМК ге1=*ѕбу1еєһеес" Һгеғ="соптоп.сѕз" буре= 


Последняя строка задаст главную таблицу стилей, которая используется по умолчанию. 
Атрибут Суре указывает браузеру, на каком языке написана таблица стилей, и позволя- 
ст не загружать ее на компьютер в том случае, если этот язык браузером не поддерживается. 


Импорт таблиц стилей 


Существует еще один способ подключить к НТМІ -документу таблицу стилей, хра- 
нящуюся в отдельном файле. Делается это при помощи специальной директивы 
@1трогЕ следующим образом. 
<5ТҮІЕ ТҮРЕ="Бехб/сѕѕ"> 

~ описание стилей для элементов 

біпроге иг1(зсу1е.свѕ) 

— продолжение описания стилей для элементов 
</ЗТУЬЕ> 

В этом случае происходит объединение всех записей в таблицах, слеланных внутри 
документа, с импортированной таблицей из файла э5у1е.с55. Конфликтные ситуации 
разрешаются с помощью механизма каскадирования. 

Следует отметить, что директиву @1трогЕ не поддерживает браузер Ме{5саре Мамра- 
10г4.0, но он установлен не более чем у 0,1% пользователей Сети, поэтому ими можно 
пренебречь. 


Как скрыть информацию о стиле от браузера 


Чтобы скрыть информацию о стиле от старых браузеров. не поддерживающих эле- 
мент 5ТУБЕ (справедливости ради надо заметить, что их уже практически не осталось), 
можно использовать то же, что и при сокрытии кода сценария, — комментарии: 


<ЗТУБЕ Куре="кехе/сз5“> 
<!-- 

НІ { со1ок: гей } 

Р { со1ог: Ьше} 

—> 


</5ТҮІЕ> 


Незнакомые теги браузером просто игнорируются, а описание стилей, помещенное 
внутрь комментария НТМІ., также не будет выведено на экран. 


178 Часть И. С55 


Глава 10 


Синтаксис С$$ 


В этой главе... 
Правила С85 

Типы селекторов 
Единицы измерения 
Наследование 


Каскадирование 


уууууу 


Как С$5$ обрабатывается браузером 


Правила С$$ 


С$$, как и любой другой компьютерный язык, имеет строго определенный синтаксис, т.е. 
правила, по которым создаются таблицы стилей. В предыдущей главе вы уже видели несколь- 
ко примеров разных таблиц стилей и наверняка заметили, что синтаксис С$$ отличается от 
синтаксиса НТМІ.. В С$$ нет ни элементов, ни атрибутов, ни тегов. В нем есть правила, каж- 
дое из которых описывает внешний вид одного или группы элементов НТМЕ.. Правило опре- 
деляет, как будет выглядеть определенный элемент. Дадим определение. 


Правило С5$ — это структурная единица таблицы стилей, которая содержит описа. 
ние стилей для определенного элемента. 


Правило состоит из селектора, который всегда располагается слева, и блока объявле- 
ния стилей, который заключается в фигурные скобки и следует непосредственно за се- 
лектором (рис. 10.1). Каждое объявление в свою очередь состоит из свойства и его значе- 
ния. Именно свойство и определяет вид стиля, который будет применяться к элементу. 


свойство —] значение 
Ні {соог: Ыие; #опї-ѕіге: 14 рх} 
С селектор 1__— блок объявления стилей 


Рис. 10.1. Структура правила С$$ 


Правило может содержать несколько объявлений, отделенных точкой с запятой. По- 
сле последнего объявления точку с запятой можно не ставить. 

Для удобства чтения и редактирования таблиц стилей ее правила обычно записывают 
таким образом, чтобы каждое объявление располагалось на отдельной строке. Например: 


н2{ 

со1ог:ригр1е; 

Ғопс: Бо1& 16рЕ Уекаапа, ѕапѕ-ѕегіғ; 
} 


Язык С85, так же каки НТМІ., игнорирует лишние пробелы и переводы строк. Пра- 
вило, приведенное выше, можно записать и так: 


Бо1а 16ре Уекаапа, запз-5ех1Е} 


Н2 {со1ог:рштр1е; Ёопе: 


Воспринято оно будет точно так же, даже даст дополнительную экономию в размере 
кода за счет удаления лишних символов пробелов и переводов строки. Но такое написа- 
ние затрудняет восприятие кола. Можно пойти на компромисс: сначала писать правила, 
разбивая их на строки, а после того как таблица стилей будет окончательно готова, уда- 
лить лишние незначащие символы. Но нет гарантии, что после этого вам не захочется 
исправить что-то еше, тогла придется немного помучаться, прежле чем вы найдете нуж- 
ное свойство и отредактируете его. 

Для каждого свойства С$$ в спецификации указано множество значений, которые 
может принимать это свойство, а также значение по ‘умолчанию и область применения 
свойства, т.е. те элементы, к которым оно может применяться. Также указывается, явля- 
ется ли это свойство наследуемым, т.е. будет ли оно применяться для элементов- 
потомков. Указываются устройства вывода, к которым применяются эти свойства. Так 
как мы будем рассматривать компьютерный дизайн, то упоминать будем только те свой- 
ства, которые применимы в нашем случае, т.е. предназначены для управления отображе- 
нием на экране монитора, а также поддерживаются современными браузерами. 


Типы селекторов 


Селектор служит для того, чтобы в НТМІ -документе однозначно определить тот эле- 
мент, к которому следует применить данное С$$-правило. Так как браузерами полно- 
стью реализована поддержка только стандарта С55-], рассмотрим селекторы, допусти- 
мые этим стандартом. 


Селектор по элементу 


В качестве селектора может использоваться имя элемента НТМІ.. Например, если мы 
хотим, чтобы текст всех абзацев в НТМ!--документе был написан шрифтом Апа|, обыч- 
ным начертанием и размером 14 пунктов, то следует написать такое правило: 

Р( 

БопЕ: погта1 14рЕ Агіа1; 
} 

В качестве селектора тут выбран элемент Р, обозначающий в языке НТМІ. отдельный 
абзац. 


Селектор по классу 


Если же потребуется выделить абзацы двух типов: первый, аналогичный описанному 
выше, а второй с текстом, цвет которого уже должен быть не черным, а синим. Можно 
выйти из положения несколькими путями. Первый — это указать цвет текста в атрибуте 
ѕсу1е элемента Р. 


<р ѕбуІе="со1ог:Ь1џе"> Цвет этого и только этого абзаца будет синим</Р> 


Однако речь идет о ситуации, когда на странице должен существовать не один абзац 
такого вида, а целый класс, поэтому описанный выше способ нам не очень подходит. Во- 
первых, для того чтобы все абзацы класса стали синими, нужно в каждом прописать ат- 
рибут ѕгу1е= "со1ог :Ь1џе". Во-вторых, если позднее мы решим поменять цвет выде- 
ленных абзацев, придется искать каждое вхождение в код записи зЕу1е="со1ог:Б1ще" 
и исправлять в ней цвет. А если, кроме цвета, мы захотим, к примеру, увеличить еще 
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и шрифт, то потребуются еще более серьезные изменения в коде. Но мы говорили ранее, 
что хочется написать такую разметку, чтобы изменения в нее вносить не требовалось, 
адля смены внешнего вида документа можно было изменять только саму таблицу стилей. 
Второй вариант решения этой задачи — использование селектора по классу. Для того 
чтобы определить класс, в НТМТ-коде используется атрибут с1азз, который можно 
применять в любом элементе. В НТМІ -коде мы должны написать следующее: 
<р с1азз="ЬЛие">Цвет этого абзаца и всех других абзацев этого класса будет 
синим</Р> 
В таблице стилей при этом следует написать такое правило, где в качестве селектора 
‘будет использоваться название элемента Р и через точку (. ) от него имя класса: 
<БТУШЕ ТҮРЕ-"бехб/сѕз"> 
Р.Б1ше( 
со1ок: Ыме; 


} 
</5ТҮІЕ> 


Такой синтаксис напоминает синтаксис объектно-ориентированных языков про- 
граммирования, где названия свойств и методов объекта отделяются от имени объекта 
точкой. Если понадобится выделить еще один класс абзацев, например красного цвета, 
можно создать еще один класс сеа. Тогда нужно написать такой код: 


"сехс/с55"> 


</5ТҮГЕ> 
2. другие элементы НТМ .. 
<Р с1аѕ="гей">красный абзац</Р> 


Вообще-то, нельзя считать очень хорошей идею называть классы в зависимости от их 
внешнего вида. Так, если позднее вы решите изменить ивет синих абзацев на зеленый, 
для этого надо будет просто исправить правило: 
<ТҮІЕ ТУРЕ-"КехЕ/сз5"> 
Р.Ыше{ 

со1ог: дкееп; 
$ 
</5ТҮЦЕ> 


После такой операции цвет синих абзацев изменится на зеленый, но название класса 
останется р1џе, что уже не соответствует действительности, и вы сами будете путаться. 
Названия классам лучше давать в соответствии с их прямым назначением. Например, ес- 
ли синими вы решили сделать первые абзацы каждой публикации, размещенной на ва- 
шем сервере, то такой класс можно назвать Еігес. Как бы внешне ни выглядел этот 
стиль, вы все равно вспомните, что он применяется к первому абзацу. 

Можно создать унифицированный класс, который можно будет использовать в лю- 
бых элементах НТМІ.. Например, создадим класс красных объектов. Для этого в таблице 
стилей нужно написать такое правило: 
<5ТҮЦЕ ТУРЕ="Еехе/свз"> 
.хеа{ 

со1ог: кеа; 
<, ? бТҮГЕ> 

Перед именем класса можно не указывать название элемента. Тогда “пустота” в нача- 
ле как бы обозначает любой элемент. Далее можно написать такой код. 


Глава 10. Синтаксис С55 181 


<Н1 с1авз-"хед">Красный заголовок</Н1> 
<Р с1азз="ге">Текст абзаца тоже будет красным</Р> 

В результате цвет любого элемента, внутри открывающего тега которого будет стоять 
атрибут с1азз="геа", будет красным. 


Селектор по идентификатору 


Возможна другая ситуация, когда в НТМІ -документе должен присутствовать уни- 
кальный элемент, стиль оформления которого отличается от всех других на этой страни- 
це. Тогда для этого элемента при помощи атрибута 1а нужно определить его собствен- 
ный уникальный идентификатор, который также может применяться в любом элементе 
НТМЕ. Существует требование, по которому в НТМ!-документе может быть только 
один элемент с заданным іа. Поэтому, если на каждой странице вашего сайта самый 
первый заголовок должен отличаться от всех остальных, то его следует оформить с ис- 
пользованием идентификатора: 
<Н1 ій=" Еігесһеадег">Первый заголовок на странице</Н1> 


Чтобы записать С$$-правило для определения стиля этого заголовка, используется 
такой же прием, как и для селекторов по классу, но в качестве разделителя используется 
не точка, а символ решетки (#). 

Н1#Еігвіћеадег { 

со1ог: гей; 

Ғопе-меісће: юо1а; 

сехЕ-а119п: сепбег 


Идентификатор является более приоритетным признаком, чем класс. Поэтому, если в 
НТМЕ-коде для некоторого элемента будет указан и класс, и идентификатор, то приме- 
нен будет именно стиль идентификатора. Например: 
<5ТҮЦЕ» 

НИЕ хсвсвеааех ( 

со1ог: Ыше; 

ЕопЕ-шезаве: Ьо1а; 

Сехс-а1ісп: сепбег 
} 

Н1.хеа( 
со]ог: гей; 
} 
</5ТҮШЕ> 
<Н1 с1авв="гед" ід=" Ғігѕсһеайег">Первый заголовок на странице</Н1> 


Тогда заголовок будет выведен на экран в соответствии со стилем ##ігзёһеадег, 
а именно синим жирным шрифтом, с выравниванием по центру. 

В НТМІ -коде не может быть двух элементов с одинаковым названием идентифика- 
тора. Поясним на примерах. 

Недопустимый по спецификации код: 


<Н1 ід="паше*>Уникальный заголовок</Н1> 
<Р ій-"пате">Уникальный абзац</Р> 


Но допустимо такое использование, хотя и не совсем логичное: 


<Н1 ід="пате">Первый уникальный заголовок</Н1> 
<НІ ід="пате">Второй уникальный заголовок</Н1> 


В таком случае логичнее использовать классы. Тем не менее все браузеры разрешают 
использование элементов с одинаковым идентификатором. 
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По аналогии с унифицированным селектором по классу можно создать унифициро- 
ванный селектор по идентификатору (имя элемента при этом не указывается, пустое ме- 
сто обозначает как бы произвольный элемент, но не забывайте, что идентификатор на 
странице может быть только один). Приведем пример: 


#папе { 
Ђаскотоџпа: ућеас; 
раддіпо: 5рх; 

} 


Контекстный селектор 


Представьте, что вы хотите выделить зеленым цветом все слова, помещенные внутри 
элемента ЗТВОМС, но размещенные только в тексте абзацев. 


<Р>Создаем особое <ЅТКОМС>выделение</ЅТВОМО> внутри абзаца</Р> 


Тогда нужно записать такой стиль: 

ЭТВОМС { 
со1ог: дгееп 
} 

Но в этом случае содержимое всех элементов 5ТВОМС на странице будет зеленым, 
втом числе и за пределами абзацев текста. Ситуацию можно обойти введением специ- 
ального класса для элемента 5ТВОМС. Тогда придется написать так: 
<Р>Создаем особое <ЅТКОМС с1аѕв="дгееп">выделение</5ТКОМО> внутри абзаца</Р> 
и создать дополнительный стиль: 


БТКОМ.дгееп { 
соІог: дгееп 
) 


Но такой вариант, во-первых, не очень удобен в использовании, а, во-вторых, удли- 
няет код. Проблему решает использование контекстного селектора, который позволяет 
указать, что стиль необходимо применить для элементов ЗТВОМС, находящихся исклю- 
чительно внутри элемента р. Соответствующее определение выполняется таким образом: 
Р ЗТКОМС { р 


со1ог: дгееп 
} 


Названия элементов при этом отделяются пробелом. Мы как бы говорим, что стиль 
следует применить к элементу ЗТВОМС, находящемуся внутри элемента Р. Глубина вло- 
женности контекстного селектора может быть произвольной. Имена элементов, указы- 
ваемых в селекторе, отделяются пробелами и размещаются в порядке их расположения 
в дереве элементов. Дерево элементов — структура всех элементов НТМГ-страницы, от- 
ражающая их вложенность друг в друга (рис. 10.2). 

Можно, например, написать такой контекстный селектор для фрагмента кода: 


<Р>Текст абзаца, в котором располагается <СІТЕ>цитата из другого источника, 
содержащая <5ТВОМ>сильное логическое выделение</5ТВОМС> и много ценной ин- 
формации</СТТЕ>, причем для элемента ЗТВОМС нужно задать контекстный селек- 
тор</Р> 


Селектор в этом случае будет таким: 


Р СІТЕ ТОМО { 
со1ог: Ыше 


} 
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Рис. 10.2. Дерево элементов НТМІ.-документа 


Псевдоэлементы 


В дереве элементов присутствуют только те элементы, для которых в НТМІ. существуют 
соответствующие конструкции. Например, в языке НТМІ. нет элемента, который соответ- 
ствовал бы первой строке абзаца или первой букве. Эти элементы вы не найдете в дереве 
элементов, а следовательно, не сможете применить к ним стиль оформления. Для этого 
в С$5 было введено понятие псевдоэлемента. Приставка “псевло” в данном случае означа- 
ет, что с точки зрения НТМІ. такого элемента не существует, но он существует на НТМІ- 
странице, и его можно использовать в качестве селектора для написания С$$-правила. 

С85 І поддерживает два псевдоэлемента: Е1хзЕ-1еЕЕег и Е1кзЕ-11пе. Рассмотрим 
возможности их применения в документах. 

Псевдоэлемент ігес-1ебсег позволяет создавать буквицы, т.е. применять особое 
оформление к первой букве элемента. Без использования псевдоэлементов буквицу 
можно создать, например, таким способом: первую букву помещаем между тегами эле- 
мента 5РАМ и определяем класс Е1хзЕ1еетег. 
<Р><ЗРАМ с1авз=" Ғігес1еббег">С</5РАМ>создаєем буквицу без использования 
псевдоэлементов</Р> 

И записываем такой стиль, чтобы буква была синего цвета, написана шрифтом Уег- 
дапа большего размера, чем текст, и жирным начертанием: 

БРАМ. Е1кэс1еесег ( 

со]ог: Ыше; 

Ғопе: Бо1А 1акде уегдапа, ѕапв-вегіё 
)) 

При этом первую букву каждого абзаца нужно поместить внутри тегов <5РАМ с1аѕѕ= 
"Е1хзЕ1ескег"></5РАМ>, — согласитесь, это не очень удобно. 

С использованием псевдокласса ситуация значительно упрощается. Достаточно про- 
сто написать в НТМ!--коде: 


<Р>Создаем буквицу при помощи псевдоэлемента Е1кзЕ-1еЕкех</Р> 
и применить стиль: 
Р: Ғігѕс-Іебсег{ 

со1ог: Ыше; 

Ғопе: Боа 1акде Уегдапа, запз-вег1Е 
} 

При этом заметьте, что имя псевдоэлемента пишется через двоеточие (:) от имени 

элемента, внутри которого следует использовать этот псевдоэлемент. В этом случае уже 
не требуется выделять вручную первые буквы внутри абзацев, к ним автоматически будет 
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применен стиль из правила с селектором Р: Ғіг=с-1есбег. В результате первая буква 
каждого абзаца станет крупной, полужирной и синей, как и в предыдущем случае. 

Если вы хотите, чтобы текст обтекал первую букву, то можно дополнительно задать 
свойство ЕТоае : 1еғє, тогда буква будет прижиматься к левому краю страницы, а текст 
будет ес обтекать. 

Р:Е1кве-1еЕкег{ 

со1ог: Ыше; 
ЕоПЕ: ро1а 24рЕ Мегдапа, запз-зекаЕ; 
ЕЛоаЕ:1еЕ 

} 


Буквица, созданная с помощью псевдоэлемента, будет выглядеть в окне браузера так, 
как показано на рис. 10.3. 


[Ест документе маза ИИ: 
2 бе Еа уен ы боли Тоон удибон Нер 


:.Ә ӘӘ ӘӘ гләЕ 


2 ЗА Ноле С8сойлайе обмены део. 


(Стек буну при помощи 
псевдоэлемента бгз Іейег При этом 
дополнительно задано свойство бог, 


чтобы текст красиво обтекал первую 


‘букву. 


Рис. 10.3. Буквица, созданная с помощью 
псевдоэлемента: Е1кэЕ-Теёсек 


Если с буквицей можно разобраться и без помощи псевдоэлементов, то задать стиль 
оформления первой строки абзаца таким образом не удастся. Нельзя просто выделить 
часть строки, например, при помощи элемента ЅРАМ, определить класс и задать оформ- 
ление для него, потому что обычно заранее неизвестно разрешение монитора пользова- 
теля, от которого напрямую зависит, сколько слов поместится в первой строке в окне 
‘браузера. Тем не менее это довольно частый прием при оформлении публикаций и ново- 
стей, где первая часть выделяется по сравнению с остальным текстом, так как именно 
в начале содержится суть сообщения. С помощью псевдоэлемента Еіӯѕс-1іпе это мож- 
но сделать довольно легко. При этом мы не будем зависеть от разрешения монитора или 
других факторов. Браузер будет генерировать страницу, и после того как определит конец 
первой строки, применит к ней стиль. В таблице стилей при этом должно быть записано 
правило вила: 

Р:Ғігвс-1іпе{ 
Ғопе-вбу1е: іба1іс 
} 


В этом случае первая строка любого абзаца в документе будет написана курсивом. 

Следует заметить, что эти псевдоэлементы не поддерживаются браузерами тетей 
Ехрюгег 5.0 и №еіѕсаре Мауіра‹ог 4.х, что не должно мешать их использованию. Эти брау- 
зеры просто будут игнорировать псевдоэлементы. Первые буквы и строки будут выгля- 
деть в этих браузерах обыкновенно, тогда как в браузерах, поддерживающих псевдоэле- 
менты Ёірѕс-1ессег и Ғігѕі-1іпе, соответствующие стили оформления будут при- 
менены. 
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Псевдоклассы 


Кроме псевдоэлементов, в С$$ существуют еше и псевдоклассы, которые основыва- 
ются на информации, не являющейся частью НТМГ-документа. Есть псевдоклассы, 
обозначающие посещенные и не посещенные, а также активные ссылки. Однако в коде 
документа вы не сможете определить, какая из ссылок является посещенной, какая 
вданный моментактивна и т.д. Этой информацией владеет непосредственно браузер. 

В С$$ 1 существует четыре псевдокласса, позволяющих работать со ссылками: 


е 1іпк — обозначает простую ссылку; 

• асбіуе — обозначает активную ссылку; 

е уіѕібеа — обозначает посещенную ссылку; 

• һоуег — обозначает ссылку, на которую наведен указатель мыши. 


Таким образом, чтобы с помощью С$$ задать внешний вид ссылок, можно написать 

такие правила: 
А:1іпк{ 

= стиль оформления обычной ссылки... 

} 
А:ассіуе( 

стиль оформления активной ссылки.. 

} 
А:уізісед( 

=. стиль оформления посещенной ссылки... 


И наконец, то, чего невозможно было сделать средствами НТМІ., — задание стиля 
ссылки, на которую наведен указатель мыши. 
А:һоуег( 
< стиль оформления ссылки, на которую наведен указатель мыши .. 


Псевдоклассы можно использовать в комбинации с обычными классами и идентифи- 
каторами. 
<А с1авв="раде1іпк" ҺгеЁ="раде.Һт]">Текст ссылки</А> 
А.раде1іпк:һоуег ( 
„. задание стиля ... 


} 


или в случае с идентификаторами: 


<А ід-"пу1іпк" Һгеғ="раде.Һеп1">Текст ссылки</А> 
Айпу1іпк:уіѕібеа ( 
задание стиля -- 


Группировка селекторов 


Если блоки описаний для нескольких селекторов полностью совпадают, то эти селек- 
торы можно сгруппировать. 

Группировка — это объединение селекторов с одинаковыми объявлениями с целью 
уменьшения общего объема кода. 

При группировке селекторы должны разлеляться запятой. Например, если вы хотите 
‚для всех заголовков (с первого по шестой уровни) в документе изменить цвет, то можете 
написать такое правило С5$: 


н1, Н2, НЗ, НЕ, Н5, Нб {со1ог: Ыше}, 
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вместо того, чтобы шесть раз писать такое правило: 


НІ {со1ог: Ы ше} 
Н2 {со1ог: Ыше} 
НЗ {со1ог: ЬЫше} 
На {со1ог: Ыме} 
Н5 {со]ог: Бе} 
Нб (со1ог: Ьџе} 
Пользуйтесь группировкой исключительно в тех случаях, когда блоки описаний 
в правилах полностью совпадают. Если совпаление описаний имеет место только по не- 
которым свойствам, то лучше такие правила не объединять. Приведем пример. У вас есть 
два похожих описания для заголовка и абзаца: 
н { 
со1ог:Ыџе; 
ЕопЕ-Еасе: Мегдапа, запз-зек1Ё; 
бехс-а1ідп: сепсекг 
} 
Р{ 
со1ог:Ьше; 
ЕопЕ-Еасе: Уегаапа, ѕапѕ-вегіЕ; 


Может возникнуть соблазн объединить эти описания таким образом: 


Н1, Р{ 

со1ог:Ы1џе; 

ЕопЕ-Еасе: Мегдапа, запз-век1 Е; 
} 


а затем добавить недостающий фрагмент для элемента н1: 


н1( 

бехс-а1ісп: сепсег 
} 

В этом случае ухудшается логичность построения таблицы стилей, поскольку впо- 
следствии вы или кто-то другой может не очень внимательно посмотреть на все стили 
и запомнить только последнюю запись, в которой для заголовка указано единственное 
свойство выравнивания по центру и больше ничего. Тем не менее заголовок на странице 
будет синим и написан шрифтом Уетдапа. 

Хорошим примером группировки можно назвать тот случай, когда, например, стили 
обычных и активных ссылок одинаковые. 

А:Ліпк, А:асбіче ( 
со1ог:9ғееп; 
Техс-десогагіоп: попе 

} 

Тогда обычные и активные ссылки будут зелеными и без подчеркивания. Посещенные 
будут оформлены по умолчанию, как задано в НТМІ. т.е. пурпурными и с подчеркиванием. 


Единицы измерения 


Для того чтобы задавать значения свойств, в С55 предусмотрены различные единицы 
измерения. Это единицы длины, единицы задания цвета и ОКІ. 
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Единицы длины 


Все единицы длины служат для задания вертикальных или горизонтальных размеров. 
объектов, размеров рамок, полей, отступов, размера шрифта и высоты строки. Все они 
‘делятся на два больших класса: относительные и абсолютные. 

Относительные устанавливают размер относительно какой-то другой единицы, на- 
пример точки на экране монитора, размер которой в свою очередь зависит от разреше- 
ния. Относительных единиц всего три. 


1. рх 
1 рх равен одной точке на экране монитора, которую обычно называют пиксе- 
лем. 

2. еп 
1 ет равен размеру (высоте) шрифта, используемого в данном элементе. Напри- 


мер, если в пределах абзаца используется размер шрифта, равный 12 пикселям, то 
в пределах этого абзаца 1 ет=12 рх. 


3. ех 
1 ех равен высоте строчной буквы “х” в шрифте. Именно по этой букве форми- 


руется оптическая высота строки. Величина ех, так же как и величина ем, зависит 
от базового размера шрифта элемента. 


Абсолютные единицы измерения имеют фиксированный размер, не зависящий от 
других величин, их в С$$ поддерживается всего пять. 
1. м 
1 іп равен одному дюйму, т.е. 2,54 см. Дюйм, как единица измерения длины, ха- 
рактерен для англоязычных стран: США, Великобритании и др. 
2. ре 
1 ре равен 1/72 дюйма; эта величина называется типографским пунктом. В пунк- 


тах обычно измеряется размер шрифта. абзацных отступов и тому подобного, если 
работа ведется в текстовом редакторе наподобие Місгоѕоћ Мога. 


Зре 


1 рс равен 12 ре или 1/6 дюйма — эта величина называется пикой. Пика также 
является величиной, которая чаще всего применяется в типографском деле. 


4. тл 
1 пм равен одному миллиметру метрической системы измерения. Это уже более 
близкая нам единица измерения, равная одной десятой доле сантиметра. 

5. ст 
1 ст равен одному сантиметру метрической системы измерения. Сантиметр, или 
одна сотая метра, — привычная нам единица измерения. 


Абсолютные величины лучше использовать только тогда, когда известны параметры 
устройства вывода. Например, экраны мониторов могут иметь совершенно различные 
размеры и разрешения, которые и определяют размер относительных величин, например 
пикселя. Так что шрифт размером 10 рх может хорошо читаться на маленьких разреше- 
ниях, но плохо на больших. 
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Процентные величины 


Кроме того, в С5$ можно пользоваться процентами от какой-либо величины (например, 
отширины экрана). Процентные значения также относятся к относительным величинам. 

Проценты в С$$ всегда считаются относительно какой-то другой величины, напри- 
мер значения ширины. Для любого свойства, поддерживающего задание значения в про- 
центах, всегда определено, относительно какого значения следует их вычислять. В каче- 
стве такого значения может выступать линейное значение другого свойства этого же эле- 
мента или линейное значение свойства элемента-предка, например ширина контейнера, 
содержащего заданный элемент. 


Замечание. Без использования процентных значений совершенно невозможно 
обойтись при “резиновой” верстке. 


Обозначение цвета 


Цвета в С$$ можно задавать тремя способами: по ключевым словам (Ь1џе, гей и про- 
чее), указав шестнадцатеричный код цвета в модели КСВ — по аналогии с НТМЕ 
(#0000ЕЕ, #ЕЕ0000) и, наконец, десятичные значения цветовых компонент модели КОВ. 

Подробнее о цветовой модели КСВ можно, забежав вперед, прочитать в главе 18, 
“Графика для Интерет”. Там же рассматривается вопрос о формировании шестнадцате- 
ричного кода. Пока скажем только то, что введение возможности напрямую указать зна- 
чение составляющих цветовых компонент модели ВСВ избавляет от необходимости 
пользоваться калькулятором или другими средствами для получения шестнадцатерич- 
ного кода цвета. Чтобы указать в качестве значения числовые составляющие цвета, мож- 
но задать, например, такие значения. 


* гоЬ (255, 255, 255) — белый; 

» то (0, 0, 0) — черный; 

» ГОЪ (255, 0, 0) — красный; 

® ОБ (0, 255, 0) — зеленый; 

® то (0, 0, 255) — синий. 

Кроме этого, С55 поддерживает сокращенную запись цвета в шестнадцатеричной 
форме. В записи используется шесть цифр, и каждая пара отвечает за одну компоненту 
цвета: красную, зеленую и синюю. Если в каждой паре шестнадцатеричные цифры в за- 


писи кода цвета совпадают, то запись можно сократить, записав цифру всего один раз. 
Примеры приведены в табл. 10.1. 


Таблица 10.1. Примеры записи цвета в С55 


Цвет асв Код Сокращение 
Белый 255.255.255 #ЕЕЕЕЕЕ ВЕЕР 
Черный 0.0.0 #000000 #000 
Красный 255.0.0 #770000 #700 
Зеленый 0.255.0 #00ЕЕ00 #020 
Синий 0.0.255 #0000ЕЕ #00Е 
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Задание ЦВЕ 


В некоторых свойствах в качестве значения надо указывать ОКІ.. Чаще всего такие 
значения свойств используются при задании фоновых изображений или, например, для 
определения графических маркеров для списков. Формат залания универсального иден- 
тификатора ресурса следующий: сначала идет обозначение функции иг1, а затем в круг- 
лых скобках указывается путь к файлу. 
вору { 


Ђаскагоопа-ітасе: мк1 (/3тадев/Баскагоипа.ч1Е) 
} 


Предупреждение! В СЅ5 путь к файлу определяется относительно таблицы стилей, а 
не НТМІ -документа. Поэтому при описании ОВІ., следует быть особенно внима- | 
тельным, когдат таблица стилей хранится во внешнем файле. ] 


Какие единицы длины больше подходят для Меь 


Как вы помните, в языке НТМЕ применялись всего две единицы измерения: пиксели 
и проценты. С их помощью можно было задавать линейные размеры таблиц и их ячеек, 
разделительных линий, изображений и отступов вокруг них, размеры областей встраи- 
ваемых объектов и размеры фреймов. Кроме этого, в НТМ!. существовала специальная 
шкала от 1 до 7 для задания размеров шрифта. 

Размеры разделительных горизонтальных линий (НВ) можно было задавать, напри- 
мер, так: 
<НЕ міаєћ="100"> 
Здесь ширина линии задается равной 100 пикселям. Другой пример: 
<НК міасћ="100%"> 


В этом случае ширина линии будет равна 100% ширины контейнера, в котором находится 
эта линия. Если она нахолится просто на странице, то ширина булет равна ширине окна 
браузера. Если же разделительная линия находится, например, внутри ячейки таблицы. 
ширина которой составляет 200 пикселей, то и ширина линии будет равна 200 пикселей. 

В С$$ доступен гораздо более широкий набор единиц измерения, среди которых есть 
уже привычные для МеБ-разработчика пиксели и проценты, а также появились и новые. 
Часть из них взята из реальной жизни: 


е іп — дюйм (примерно 2,54 см); 
• ст — сантиметр; 
• пп — миллиметр. 


Другие “перекочевали” из полиграфии, где они используются для определения пара- 
метров текста при его подготовке к типографской печати. Это такие величины: 


• ре — пункт (1/72 дюйма); 
• рс — пика (1/6 дюйма или 12 пунктов); 
® ех — высота строчной буквы “х” шрифта, эта величина не имеет названия. 


Пункт — очень привычная единица измерения лля тех, кто часто пользуется текстовы- 


ми или графическими редакторами. В этих редакторах в пунктах задается размер шрифта. 
Остальные единицы измерения хорошо знакомы, пожалуй, только полиграфистам. 
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И наконец, непонятные в реальном мире единицы измерения, которые принято на- 
зывать относительными, поскольку они вычисляются относительно какой-то другой ве- 
личины. Это такие единицы: 


® ем — единица, вычисляемая относительно размера шрифта элемента; 


ө рх — пиксель; его размер зависит от устройства отображения (монитора, экрана 
мобильного телефона или карманного компьютера); 


• % — процент; вычисляется относительно размера элемента-предка. 


Две последние единицы из группы относительных величин присутствовали уже 
вНТМЕ, поэтому хорошо знакомы авторам НТМ1-страниц. Это одна из причин. по ко- 
торой из всех величин, доступных в С$$, разработчики продолжают пользоваться именно 
ими. Но причин на самом деле несколько, и некоторые из них довольно существенны. 

Единицы измерения, пришедшие в С$$ из реального мира, не вполне подходят для 
описания мира виртуального. Мониторы пользователей могут иметь совершенно разные 
физические размеры и разрешения. Кроме этого, у разных операционных систем могут 
быть разные экранные разрешения: от 72 до 96 пикселей на дюйм. Создатель МеБ- 
страницы не может заранее знать, какие параметры будет иметь монитор, на котором 
пользователь будет просматривать созлаваемый им сайт. Как правило, чем больше диа- 
гональ монитора, тем ‘больше и разрешение монитора, устанавливаемое пользователем. 
Диагональ современного монитора может варьировать от 15 до 24 дюймов, а разрешение 
соответственно от 800х600 до 1600х1400. Конечно, можно ориентироваться на средние 
показатели, но это не будет правильно. 

Рассмотрим простой пример: допустим, мы хотим установить размер шрифта для ос- 
новного текста на странице. Размер шрифта в 1 см может показаться огромным на ма- 
леньком мониторе (так же, как и при печати на бумаге), а для чтения на большом экране 
это будет вполне нормальный размер. Если при описании документа мы будем пользо- 
ваться единицами измерения рсального мира, например дюймами, то не сможем пред- 
сказать, какой действительный размер будет иметь шрифт на экране каждого пользовате- 
ля. Если задать размер шрифта в реальных единицах измерения, то браузеру все равно 
придется их предварительно перевести в пиксели и лишь потом отобразить. В зависимо- 
сти от экранного разрешения монитора (72 или 96 4р!), результат может получиться раз- 
личным. И мы никак не сможем заранее предсказать, какого размера шрифт увидит 
пользователь у себя на экране. 

То же относится и к величинам, пришедшим из полиграфии, поскольку и пункты, и 
пики можно легко перевести в дюймы и сантиметры. Несмотря на это, в текстовом ре- 
лакторе мы смело оперируем пунктами в качестве единиц измерения, поскольку в конеч- 
ном итоге документ создается для дальнейшей распечатки на бумаге, и мы заранее знаем 
размер листа, на котором будет распечатан текст. Кроме того, мы часто также знаем ка- 
чество печати и разрешение печатающего устройства. В случае с подготовкой МеЬ- 
страниц мы находимся в полной неопределенности. 

По большому счету, размер пикселя тоже зависит от размера и экранного разрешения 
монитора, но пользователь все же подбирает удобное и комфортное для себя разрешение. 
Задача создателя У\еб-страницы — сделать ее удобной для чтения. Если шрифт слишком 
мелкий, то читать его будет неудобно. Если шрифт слишком крупный, то читать такой 
текст, конечно, удобнее, чем мелкий, но экранное пространство при этом расходуется 
нерационально. Пользователю всегла хочется, чтобы как можно больше полезной ин- 
формации разместилось на одном экране. 
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Если для создания страницы используется “фиксированный” дизайн, т.е. размеры 
всех структурных блоков страницы заданы жестко, то единственной допустимой едини- 
цей длины в этом случае является пиксель. Если вы воспользуетесь другими единицами, 
то дизайн при этом может просто развалиться из-за ‘неточностей перевода этих единиц 
в пиксели на разных платформах и разных мониторах. 

Проценты — незаменимая величина при “резиновой” верстке, когда необходимо, 
чтобы страница занимала все доступное ей пространство. Независимо от того, каков раз- 
мер монитора пользователя и какое у него разрешение, таблица шириной 100% будет по 
ширине совпадать с шириной окна. 

Величина ем незаменима для пропорционального увеличения размера текста, высоты 
строки, межсимвольных интервалов и расстояний между словами. Если необходимо на 20% 
увеличить размер шрифта по сравнению с базовым, то достаточно указать размер 1.2 ет, 
И каким бы ни был базовый размер шрифта, новый размер будет высчитан корректно. Та- 
кого нельзя добиться, используя типографские единицы измерения, — из-за погрешностей 
перевода их в пиксели и Неопределенности в параметрах устройства вывода текста. 


Наследование 


Термин “наследование” перекочевал в С55, очевидно, из объектно-ориентированных 
языков. В общем-то, это довольно понятный и на обывательском уровне термин. Каж- 
дый из нас унаследовал от своих предков некие качества. Кто-то красивые глаза от мамы 
и сильный характер от папы, кто-то фигуру от бабушки, а цвет волос от дедушки. Кроме 
этого, каждый из нас передаст какие-то качества свои детям, внукам и правнукам, в об- 
щем, своим потомкам. 

Аналогично некоторые свойства С$$ могут наследоваться от элементов-предков. 
Предком в данном случае называется элемент, стоящий в дереве документа уровнем вы- 
ше, чем исходный элемент. Непосредственным предком называется элемент, стоящий 
ровно на один уровень выше в дереве. Аналогично определяется и непосредственный по- 
томок — это элемент, стоящий на уровень ниже в дереве элементов. 

Например, в дереве, показанном на рис. 10.4, элемент гл является потомком элемен- 
тов Ор и ВОРУ, но непосредственным потомком только элемента От. Элемент От в этом 
случае называется непосредственным предком элемента І. У элемента Р два непосред- 
ственных потомка: ЕМ и 5ТВОМС. 


НТМІ, 
ай к 
НЕАР вору 
А ее 
ТИПЕ МЕТА н о р 
| а 
и ЕМ БТЕОМО 


Рис. 10.4. Дерево элементов НТМІ.-документа 
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Для каждого свойства С$$ указывается, является оно наследуемым или нет. Напри- 
мер, к наследуемым свойствам относится цвет, задаваемый ключевым словом со1ог. 
Рассмотрим пример, когда внутри элемента Р располагается выделение ЕМ. 
<Р>Создаем <ЕМ>выделение</ЕМ> внутри абзаца</Р> 


Пусть для элемента Р задан стиль: 

Р ( 
со1ог: Ыше 
} 

Тогда элемент унаследует цвет от своего предка, и текст внутри элемента ЕМ также бу- 
дет синим, как и во всем абзаце. 

Воспользовавшись свойством наследования, можно задать общие для всего документа 
параметры оформления, указав их в самом старшем элементе документа, которыми могут 
быть или НТМЬ или ВОБУ. 
ворү{ 

со1ок: Бкомт; 
Ғопі-віге: 12рЕ 
} 

Тем самым мы задали коричневый пвет для всего текста на странице и размер шриф- 
та, равный 12 пунктам. Эти значения могут быть переопределены по более специфичны- 
ми правилам, например на основе классов или идентификаторов. 

Надо заметить, что это правило с селектором вору будет работать, даже если в коде 
страницы элемент вору явно не указан, что вполне допустимо. В этом случае синтаксиче- 
ский анализатор сам его сгенерирует и все равно включит этот элемент в дерево документа. 

Кроме этого, для каждого свойства может быть задано значение іпһегіс, которое 
означает, что это свойство должно наследоваться. 

Р( 
со1ог: іпһегіс 
} 

В результате цвет текста абзаца будет наследоваться от предка. 

Это общие принципы наследования, поэтому при написании С$$-правил следует учи- 
тывать, какие свойства являются наследуемыми, а какие нет. Свойство со1ог, например, 
является наследуемым и так, поэтому предыдущее правило не имеет особого смысла. 


Каскадирование 

Любая таблица стилей может иметь три источника возникновения. Во-первых, ее может 
‘создать автор НТМГ--документа; во-вторых, любой браузер содержит собственную таблицу 
стилей, которая задает значения по умолчанию для оформления всех элементов. Наконец, 
в-третьих, пользователь может сам создать таблицу стилей для представления страницы 
и использовать ее втом случае, если браузер предоставляет ему эту возможность. 


Общие принципы 


Итак, мы имеем три субъекта, которые могут предоставлять таблицы стилей для 
оформления документов. 


Глава 10. Синтаксис С55 193 


1. Автор-разработчик МеБ-страницы. Он может написать таблицы стилей и исполь- 
зовать их согласно правилам, т.е. помещать внутрь документа или подключать из 
внешнего файла. 


2. Пользователь или посетитель У/еБ-страницы. Он может самостоятельно создать 
таблицу стилей для конкретного документа, и если браузер поддерживает такую 
возможность, для просмотра документа пользователь может использовать собст- 
венную таблицу стилей. 


3. Браузер. В соответствии со спецификацией, браузеры должны сначала применить 
к НТМЕ-документу собственную таблицу стилей, используемую по умолчанию, 
и только потом применять остальные таблицы стилей. 


Области действия таблиц, созданных любым из трех субъектов, могут пересекаться, 
например в каждой таблице может существовать правило, определяющее внешний вид 
текста для абзаца. В этом случае выбор приоритетного С58-правила осуществляется 
в соответствии с принципами каскадирования. При наличии нескольких правил для од- 
ного и того же элемента преимущество имеет правило с наибольшим приоритетом. 

По умолчанию правила в таблицах стилей, созданных разработчиками страницы, 
имеют больший приоритет, чем правила, созданные пользователем. И все правила разра- 
ботчика и пользователя имеют больший приоритет, чем правила в таблице стилей браузе- 
ра, используемой по умолчанию. Таким образом, наименее приоритетна — таблица сти- 
лей браузера, затем идет таблица стилей пользователя, и самой приоритетной является 
таблица стилей, созданная разработчиком. 

Этот порядок можно просто изменить или же, не меняя его, указать директиву 
!іпрогбапе для какого-то отдельного правила — тогда правило с такой директивой ста- 
новится более приоритетным. Если, например, в таблице пользователя написано 
Р( н 

со1ог: Ыце !ітрогсапе 
» 
а втаблице разработчика написано 


Р{ 
со1ог: гей 
} 


то более приоритетным будет первое правило, т.е. цвет текста абзацев будет синим. Если же 
правило с директивой ! ітрогбапі будет существовать и в таблице пользователя, и в таб- 
лице разработчика, то приоритетнее будет таблица разработчика. 

Таблицы стилей, подключаемые из внешних источников, также каскадируются, и их 
приоритетность определяется порялком подключения таблиц. Сначала применяется таб- 
лица стилей по умолчанию, затем ее правила переопределяются первой подключенной 
таблицей, потом подключается следующая, которая переопрелеляет правила предыду- 
щей, и т.д. Поэтому подключайте таблицы стилей в порядке возрастания их важности, 
поскольку этот порядок злесь имеет значение. 

Рассмотрим пример использования в документе трех внешних таблиц стилей, содер- 
жимое которых представлено в табл. 10.2. 


Таблица 10.2. Три внешние таблицы стилей 


561.55 55/е2.с55 $3.55 
Р{ РТ Р( 
со1ог: гед со1ог: дгееп !1трокбсапЕ со1ог: Ыше 


} } } 
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Если сначала подключить таблицу зсу1е1, а затем ѕёу1е3: 


*ѕбу1е1.свв" хе! 
всу1е3.свз" ге 


вруТевћеер" гуре="бехё/с=в"> 
зЕУ1евнеее“ куре=“Еехе/сзв"> 


то цвет текста в абзацах будет синим, так как последней подключена третья таблица. Ес- 
ли же поменять их местами, то цвет будет красным. 

В случае подключения всех трех таблиц по порядку: 
<ГЛМК ВгеЁ="веу1е1.с55" ге1=*збу1евһееб" буре="Сехі/сѕѕ"> 
<ТЛМК Һгеѓ="ѕСу1е2.свѕ" ге1="збу1евћеер" куре="кехь/свз"> 
<ЛМК Һгеғ="вбу1еЗ.с=Б" ге1="=бу1еѕћееб" Куре="хехЕ/свз"> 
цвет текста в абзацах будет зеленым, поскольку это свойство помечено директивой 
!іпрогбапе и, следовательно, имеет больший приоритет. 

То же относится и к правилам, записанным внутри одной таблицы стилей. Каждое 
следующее правило переопределяет предыдущее, естественно, если эти правила написа- 
ны для одного селектора: 
<5тҮШЕ> 

Р{ 

со1ог: кей 
} 
Р{ 
со1ог: дгееп !ітрогбапе 
} 
Р( 
со1ог: Ыме 


} 
</5ТҮЕ> 


В этом случае текст абзацев также будет зеленым. Третье правило для р не будет при- 
менено, так как во втором присутствует пометка ! ітрогсапс. Если эту пометку убрать, 
то цвет текста абзацев станет синим. 


Порядок каскадирования 


Пока мы разобрались только с простейшими случаями каскадирования. 

В более сложных случаях, когда в селекторах используются классы, идентификаторы и 
другие подвиды селекторов, для окончательного определения внешнего вида элемента браузе- 
ру приходится поработать. Чтобы установить значение конкретного свойства для каждого 
элемента, браузеру необходимо применить следующие правила сортировки объявлений. 

Сначала нужно найти все объявления, которые применяются к рассматриваемой паре 
“элемент + свойство” с учетом того устройства, на которое будет выводиться информа- 
ция. Объявления, не относящиеся к конечному устройству вывода, пропускаются. Объ- 
явление применяется к элементу только в том случае, если в таблице стилей ему соответ- 
ствует селектор. Допустим, в таблице стилей встретилось такое правило: 
нз( 

со1ог:Ьгоут 
} 

Если лалее в тексте НТМІ.-документа будет найден элемент НЗ, то это правило к нему 
булет применено. 

Первичная сортировка объявлений выполняется по приоритету и источнику таблицы 
стилей (менее приоритетна таблица стилей браузера, затем идет таблица стилей пользо- 
вателя, и самой приоритетной является таблица стилей, созданная разработчиком) с уче- 
том того, что объявления ! ітрогсапе имеют приоритет над обычными объявлениями. 
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Вторичная сортировка выполняется по уровню спецификации селектора: более спе- 
цифичные селекторы имеют приоритет над более общими селекторами. Псевдоэлементы 
и псевдоклассы считаются обычными элементами и классами соответственно. 

И наконец, выполняется сортировка объявлений в соответствии с порядком их следо- 
вания: если два правила имеют одинаковые приоритет, источник и специфичность, то 
будет использоваться правило, записанное последним. Считается, что правила импорти- 
руемых таблиц стилей (при помощи @1трохЕ) должны располагаться перед правилами 
таблицы стилей, в которую осуществляется импорт. 
<5түгЕ> 
/*Сначала осуществляется импорт таблиц стилей*/ 

Віпрог шг1(ѕбу1е.сѕѕ) 


потом идут собственные правила таблицы стилей .. 
</5ТҮЕ> 


Специфичность селекторов 
Специфичность селектора вычисляется следующим образом. 


е Подсчитывается число идентификаторов ІР в данном селекторе. Полученное зна- 
чение обозначается буквой а. 


е Подсчитывается число других классов и псевдоклассов в данном селекторе. Полу- 
ченное значение обозначается буквой Ъ. 


• Подсчитывается количество имен элементов в данном селекторе. Полученное зна- 
чение обозначается буквой с. 


~ Псевдоэлементы игнорируются. 


'Специфичность селектора определяется после вычисления значений а, Ъ и с посред- 
ством их объединения в одно число путем конкатенации (склеивания): арс. Полученное 
число определяет специфичность. 

Рассмотрим несколько примеров. Простое правило с селектором по элементу будет 
иметь специфичность, равную единице: 

Р{со1ог:ке@} — количество идентификаторов равно нулю (а = 0), классов также 
нет(Ь = 0), количество элементов в селекторе — 1 (с = 1). В результате специфичность 
этого селектора арс = 001 или просто 1 (незначащие нули в начале можно отбросить). 

Наиболее специфичными будут селекторы с менее специфичными идентификатора- 
ми — простые контекстные селекторы. Несколько дополнительных примеров вычисле- 
ния специфичности селекторов приведено в табл. 10.3. 


Селектор Кол-во Ш Кол-во Кол-во Специфичность 
а классов элементов 
ь с 

Р СІТЕ ЕМ {} о о з з 

Р.Б1ме {) о 1 1 11 
Н1#Єігѕбћеадег () 1 о 1 101 

#тепи Р.пехЕ ЕМ (} 1 1 2 112 

#Еоосег #тепи А:уіѕісеа {} 2 1 1 211 
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Последний приведенный в табл. 10.3 селектор будет более специфичным, чем все приве- 
денные. В нем также используется псевлокласс уіѕісеа, который учитывается как класс. 

Объявления, относящиеся к более специфичному селектору, будут переопределять 
объявления, относящиеся к селектору с меньшей специфичностью. 

В НТМЕ значениями атрибута ѕсу1е внутри открывающегося тега элемента также 
являются правила таблицы стилей. Эти правила не имеют селекторов, но с целью обес- 
печения работоспособности алгоритма каскадирования предполагается, что у них имеет- 
ся селектор с идентификатором (специфичность: а = 1,Ь = 0, с = 0). Кроме этого, 
считается, что они располагаются после всех остальных правил. Поэтому зачастую пра- 
вила, написанные в качестве значения атрибута =су1е, имеют приоритет над остальны- 
ми. Но, как вы видите, это правило справедливо не всегда, т.е. в таблице стилей может 
найтись правило с более специфичным селектором, тогда свойства, указанные в атрибуте 
ѕСу1е, будут переопределяться. 
<НЕАО> 
<ЗТУБЕ куре="кехе/свв"> 

#Ыше { со1ох: Ыше } 
</5ТҮІЕ> 
</НЕАр> 
<ворү> 
<Р ій="Ъ1џе" веу1е="со]ок: гей">Текст абзаца</Р> 
</вору> 


В приведенном выше примере цвет элемента Р должен быть красным. Несмотря на то 
что оба объявления имеют одинаковую специфичность, объявление в атрибуте зеу1е 
отменит объявление в элементе ТҮГЕ в соответствии с правилом каскадирования, так 
как записано позже него. 

Налеюсь, что вам удалось разобраться с одним из самых сложных моментов в изуче- 
нии каскадных таблиц стилей. Наконец-то стало понятно, почему они называются кас- 
кадными. В следующем разделе описывается общая схема обработки НТМІ -документа 
с таблицей стилей в браузерах. 


Как С$$ обрабатывается браузером 


Схема обработки С$5 браузером определяется только на уровне понятий, так что ее от- 
дельные реализации в разных браузерах могут отличаться друг от друга. Привеленное ниже 
описание позволит вам лучше понять работу браузера по отображению НТМТ-документа, в 
котором для оформления элементов используются каскадные таблицы стилей. 

Браузер обрабатывает исходный код в несколько этапов. На первом этапе осуществ- 
ляется грамматический анализ исходного документа, и для него создается дерево элемен- 
тов (пример такого дерева мы рассматривали при обсужлении контекстных селекторов). 

Второй этап определяет тип конечного носителя, на который будет выводиться ин- 
формация (монитор, принтер или др.). 

На третьем этапе браузер выбирает все таблицы стилей, связанные с документом и ас- 
социированные с установленным на предыдущем этапе устройством вывода. Ненужные 
таблицы стилей игнорируются. 

На четвертом этапе браузер помечаст каждый элемент дерева документа, присваивая 
каждому метки значения специфичности, как было описано выше. Назначение этих ме- 
ток в том, чтобы помочь определить, какой стиль оформления является приоритетным, 
если оформление для элемента задавалось несколькими способами. 
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На пятом этапе создается структура форматирования на основании помеченного де- 
рева документа, которая в общем-то сопоставляет с элементом заланный стиль оформле- 
ния, который и будет в конечном счете к нему применен. Очень часто структура форма- 
тирования очень похожа на дерево документа, но она также может отличаться от него, 
если использовались псевлоэлементы или автоматически генерируемое содержимое — к 
примеру, при помощи сценариев ЈауаЅсгірі. 

На последнем этапе браузер перелает структуру форматирования на конечное устрой- 
ство (выполняется печать результатов, отображение их на экране, звуковое воспроизве- 
дение ит.д.). Пользователь получает необходимый ему результат. 

Теперь самое время перейти к самому интересному, а именно к изучению конкретных 
свойств С$$ и сфер их применения. 
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Глава 11 


Свойства С$$ 


В этой главе ... 

> Цвети фон 

> Шрифт 

> Изменение размера шрифта в браузере 
> Текст и его свойства 

> 


Интервалы 


Все С$5-свойства можно разделить на несколько групп: 


е свойства управления цветом и фоном элементов; 
• свойства управления шрифтами; 

е свойства управления текстом; 

• свойства управления списками; 

• свойства управления таблицами ит.д. 


Каждую такую группу мы будем изучать в отдельности, и начнем с управления цветом 
и фоном. 


Цвет и фон 


Если цвет текстовых элементов задавать в НТМІ. очень просто, то задать простыми 
средствами цвет, например, границ таблицы уже невозможно — приходится использо- 
вать вложенные таблицы. Однако с помощью С55 это можно делать легко и непринуж- 
денно. Кроме этого, средствами С$$ можно более гибко управлять фоновым изображе- 
нием, его повторением по горизонтали и вертикали. Так же можно помешать фоновое 
изображение в любую точку экрана, т.е. позиционировать его. 

Рассмотрим свойства работы с иветом и фоном по отдельности. 


Свойство соіог 


С этим свойством мы уже не раз встречались в процессе изучения предыдущей главы. 
Как вы уже знаете, оно задает цвет элемента, точнее, цвет текста внутри этого элемента. 
В качестве значения свойства указывается цвет в одной из доступных форм: 


~ по ключевому слову (геа, уе110%, =і1уегит.д.); 


• шестнадцатеричным кодом цвета в полной форме (#00ЕЕСС, #ЕЕРрАА) или со- 
кращенно (#0ЕС, #ЕРА); 


® десятичным кодом цвета в модели ВСВ (со1.ох: гдр (25, 205, 172)). 


Свойство со1ох является наследуемым, т.е. если для какого-то элемента оно не зада- 
но, то этот элемент унаследует его от предка. Если и для предка оно не задано, то будет 
‘осуществлен поиск вверх по дереву элементов, пока не будет найден самый старший эле- 
мент, для которого это свойство задано. Такой элемент обязательно найдется, например, 
им может оказаться элемент ВОБУ, для которого, даже в отсутствие явно заданного цвета, 
будет применена таблица стилей браузера с использованием значений по умолчанию. 
Скорее всего, цвет элемента в этом случае будет черным, что обычно и соответствует зна- 
чению по умолчанию. Аналогичный механизм будет работать для всех остальных насле- 
дуемых свойств. 


Для сравнения приводим способ задания цвета текста при помоши С$$ и только на 
НТМЕ (табл. 11.1). 


Таблица 11.1 Задание цвета текста в НТМЬ и С55 


НтмЕ С55 

<н1> н ( 

<РОМТ со1ок="Ь1е"> со1ок:Ы ше 

Синий заголовок } 

</ЕОМТ> 

</н1> <Н1>Синий заголовок</Н1> 


Свойство баскагоипа-соіог 


Это свойство позволяет задавать цвет фона для страницы или любого другого элемента. 
Таким образом, в отличие от простого НТМІ., где фон может иметь только страница или 
ячейка таблицы (т.е. те элементы, которые имеют атрибут Басо1 ог), при помощи С$$ цвет 
фона можно задать для заголовка, абзаца, ссылки или любых других элементов НТМІ.. 

В качестве значения свойства указываются цвет или ключевое слово сгапзрахепе 
(прозрачный). Свойство Ђаскогоџпа-со1ог не наследуется, но по умолчанию для него 
используется значение сгапѕрагепе — чтобы сквозь прозрачный фон элемента просве- 
чивал фон родительского элемента. Например, если для элемента Р не задано свойство 
Баскагоџпа-со1ог, то текст абзаца будет располагаться на фоне основного цвета, уста- 
новленного для всей страницы в целом. Напомню, что значение по умолчанию, которое 
задано в таблице стилей браузера, — белый цвет. 

Свойство раскагоџопа-со1ог можно сделать наследуемым, если в качестве его зна- 
чения указать іпћегіё: 

р 
Ъаскакоипа-со1ог: іпћегіє 


Но, как говорилось раньше, фон элемента-потомка будет по умолчанию прозрачным, 
и визуально он и так унаследует его от предка. Поэтому явное присвоение значения 1п- 
Һеғіє в данном случае смысла не имеет. 


Для сравнения приводим способ задания фонового цвета для страницы при помощи 
С$8 и только на НТМЕ (табл. 11.2). 


Таблица 11.2. Задание цвета фона страницы в НТМІ и С55 


нтмі. с55 

<ВОБУ Басо1ог="адша"> вору { 

текст страницы .. Ъаскакоила-со1ог: аспа 
</в00У> р 
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Свойство баскадгоипа-ітаде 


Свойство задает фоновое изображение, которое должно храниться в отдельном 
файле. Значением свойства может быть ОВ графического файла, заданное в виде 
111 (рісёиге.діё), или ключевое слово попе, означающее отсутствие фонового изобра- 
жения. Понятно, что нет смысла указывать значение попе, когда изображения нет. Не упо- 
минайте это свойство в таблице стилей, изображения и не будет. Спрашивается, зачем пи- 
сать лишний код и усложнять себе работу? Плюс это, пусть и незначительно, увеличит объ- 
ем кода. Тем более что значение попе установлено для данного свойства по умолчанию. 


| Замечание. При использовании свойства Баскатоипа-1таде рекомендуется зада- | 
вать и значение свойства Баскагоцпа-со1отг. Оно будет использоваться в том | 
случае, если фоновое изображение по тем или иным причинам окажется недоступ- | 
ным. Фоновый рисунок будет располагаться поверх фонового цвета, а сам фоно- | 
| 


Фоновое изображение в НТМЕ. можно задавать для страницы в целом, для таблицы 
(тн) или для отдельных ее ячеек (тр). В С$$ свойство раскагоипа-ітасе применимо 
для любого элемента. 

Для сравнения приводим способ залания фонового изображения для страницы в це- 
лом при помощи С$$ и только на НТМІ (табл. 11.3). 


Таблица 11.3. Задание фона страницы в НТМЬ и С55 


НТМІ. С55 

<ВОБУ Баскагоџпа="рісёцге.9іє" > вору { 

.. текст страницы ... Ъаскакоипа-ипаде: ик] (расеике.91Е) 
</вору> ) 


Свойство Баскагоипа-гереаї 
В случае, когда задано фоновое изображение, это свойство определяет, будет ли оно 
повторяться по горизонтали и вертикали. Допустимы следующие значения: 
е гереаЕ — изображение повторяется и по вертикали и по горизонтали (как в НТМ); 
е гереаЕ-х — изображение повторяется только по горизонтали (по оси х); 
® гереае-у — изображение повторяется только по вертикали (по оси у); 
• по-гереаё — изображение не повторяется, остается только одна копия изобра- 
жения. 


Аналога такого свойства в языке НТМІ. нет. Приведем пример его использования. 


рту { 
Ђаскатоцпа-ітаде: шг1 (рісёшке.9і#) 
Ђаскдгошпі-гереас: гереаб-х 

} 


<0Іу> 

Текст внутри этого контейнера будет располагаться поверх фонового изобра- 
жения, которое будет повторяться по горизонтали 
</рг\у> 


Глава 11. Свойства С55 201 


Свойство Баскагоипа-айасһтепї 


Это свойство используется для указания, должно ли фоновое изображение страницы 
прокручиваться вместе с текстом страницы (или блока) или оно должно оставаться не- 
подвижным. Установка значения зсго11 говорит о том, что фон прокручивается вместе 
с текстом, именно так чаще всего и требуется, поэтому значение зско11 используется по 
умолчанию. Использование значения Ё1хеа фиксирует фоновое изображение относи- 
тельно окна браузера, и во время прокрутки текста оно остается неподвижным. На этот 
эффект лучше посмотреть в действии, указав, например, для всех страниц фоновое изо- 
бражение и зафиксировав его. 
вору ( 

Баскакоипа-1таде: цг1(рісёшге.9іЄ); 
Баскагоип-кереаЕ: по-гереаб; 
Баскогоцпа-ассасћтепе: Е1хеа 


При помощи НТМЕ такого эффекта добиться нельзя, и, может, оно и к лучшему. На 
мой взгляд, использование такого эффекта непривычно для пользователя и, в общем-то, 
затрудняет процесс чтения страницы, а зачастую просто раздражает, поскольку сначала 
некоторое время уходит на полусознательные размышления о том, что же не так на этой 
странице, а это отвлекает внимание от основного содержимого страницы. 


Свойство Баскдгоипа-роѕійоп 


Данное свойство используется для начального позиционирования относительно окна 
браузера или блока фонового изображения, подключенного с помощью свойства Баск- 
агоцпа-ітаде. Значения можно задавать в процентах, в единицах длины и при помощи 
ключевых слов. 

Если значения задаются в процентах, то соответствующая точка изображения помеща- 
ется в указанную точку экрана или блока. Например, если указываются значения 0% 0%, то 
точка изображения с координатами 0%, 0% (т.е. его левый верхний угол) помещается в ле- 
вый верхний угол экрана или блока. Если указывается 100% 100%, то правый нижний угол 
изображения помещается в правый нижний угол экрана или блока. При указании значения 
18% 64% точка изображения с координатами 18%, 64% помещается вточку экрана или 
блока с координатами 18%, 64%. 
вору { 

Баскагоцпа-ітаде: ик] (рісбиге.91); 
Баскогоџпа-роѕісіоп: 0% 0% 


В качестве значения допускается задание координаты точки относительно левого верх- 
него угла окна браузера. В эту точку помещается левый верхний угол фонового изображе- 
ния. Координаты точки могут задаваться при помощи любых допустимых в С$$ абсолют- 
ных единиц измерения длины: пикселях, сантиметрах и т.д. Использование единиц изме- 
рения можно комбинировать. т.е. для задания одной координаты можно использовать одну 
единицу, а для задания другой — другую. Допускается задание отрицательных значений, 
в этом случае фоновое изображение как бы смещается за пределы экрана или блока. 
вору { 

Баскагоипа-1щаде: шг1 (рісёџге.9іЄ); 
Баскогоџпа-роѕібіоп: -20рх 1ст 
} 


Кроме этого, можно задавать положение фонового изображения на экране при помощи 
ключевых слов. Ключевые слова те же, с помощью которых задается выравнивание в языке 
НТМІ.. Для выравнивания изображения по вертикали используются ключевые слова: 


202 Часть И. С$$ 


• Сор — верх изображения выравнивается по верхнему краю страницы или блока; 
• сепіег — центр изображения выравнивается по центру страницы или блока; 
• Боссот — низ изображения выравнивается по нижнему краю страницы или блока. 


Для выравнивания по горизонтали используются следующие: 


= 1еЕе — левый край изображения выравнивается по левому краю страницы или 
блока; 


• сепеек — центр изображения выравнивается по центру страницы или блока; 


® гісһе — правый край изображения выравнивается по правому краю страницы 
или блока. 
вору { 
Ъаскакоцла-4таде: шг1 (р1сбоке.91Е); 
Баскагоипа-ров1Езоп: бор сепсег 
} 


Позиционирование фонового изображения, выполняемое с помощью ключевых слов, 
можно реализовать и при помощи задания значений в процентах, так как значения сор 1еЕЕ 
и 1еЕЕ Сор аналогичны значению '0% 0%'; а сепсег и сепбег сепёег — значению 
"50% 50%'. 

Если задано только одно значение длины или одно процентное соотношение, то оно 
определяет позицию только по горизонтали, а позиция по вертикали принимается как зна- 
чение 50%. Если задано два значения, то первой указывается позиция по горизонтали. До- 
пускается сочетание значений длины и процентных соотношений (например, ' 50% 2ст’). 
Также допускается использование отрицательных значений. Ключевые слова не могут ис- 
пользоваться вместе со значениями длины или процентными соотношениями. 

Таким образом, правило: 
вору { 

Ъаскогоцпа-ітасе: иг1 (раскике.94Е); 

Ъаскагоцпа-роѕісіоп: сепсег 
} 
равносильно указанию значения 50% 50% или сепсег сепеег. Хочу заметить только 
одну особенность браузера Орега, который в этом случае корректно выравнивает изо- 
бражение по горизонтали, а вот выравнивание по вертикали на позицию 50% не выпол- 
няет. Поэтому в любом случае лучше явно указывать обе координаты: 50% 50%. 

Ну и в заключение хотелось бы отметить, что в языке НТМІ. нет атрибута, позволяю- 
щего позиционировать фоновое изображение. Положение такого изображения всегда 
определяется из расчета 0% 0%, т.е. оно всегда размещается в левом верхнем углу. 


Свойство баскагоипа 


Рассмотрим полный пример задания фона для страницы: 
вору { 
Ђаскагошпа-ітаде: игі (1тадев/Ьч.1Е); 
Басксгоцпа-гереас: по-гереае; 
Баскагошпа-аёбасітепс: Е1хед; 
Ђаскогоцпа-роѕібіоп: 50% 50%; 


Фоновое изображение теперь булет закреплено по центру экрана, не будет повторять- 
ся ни в одном из направлений и не будет прокручиваться вместе с текстом страницы. 
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В С$$ существует понятие стенографического свойства, позволяющего упрощенно за- 
писывать правила, относящиеся к заданию стилей для одного элемента, в данном случае 
для фонового изображения. Свойство раскогоџпа является стенографическим свойст- 
вом для задания значений свойств: Баскакоцпа-1таде, Баскогоцпа-кереак, раск- 
агоџпа-ассасһтепс и Баскахгоии-роз1Е1оп. Таким образом, показанный выше 
пример можно переписатьтак: 


ворү { 
Ъаскакоцпа: шг (Зтадез/Юч.ч1Е) по-гереаб Ғіхей 50% 50% 
} 


В сокращенной форме записи раскагоџпа значения всех свойств разделяются пробе- 
лами, а порядок указания значений произвольный. Это же правило можно записать и так: 
ВОрү { 

Баскакоцп4: по-гереаЕ ик] (3тадез/69.91Е) 50% 50% Е1хеа 
} 

Вот мы и познакомились со свойствами цвета и фона, и вы знаете, как с помощью 
С$$ можно задать варианты повторения фона и позиционировать фоновое изображение. 
Краткое описание всех этих свойств приведено в табл. 11.4. 


Таблица 11.4. Свойства цвета и фона С55 


Свойство Описание Пример 

соїос Назначает цвет элемента 5ТВОМС (со1ог: гей; } 

Ђаскагоипа-соіог Назначает цвет фона элемента Н4 {Баскакоциа-со1ох: 

ѕіїуег;) 

Баскакоипа-1таде Определяет УВЕ фонового ВОрү (Ъаскагоипа-1таде: 
‘изображения 1х1 (6941.91Е);} 

Ђаскагоџпа-гереас Задает стиль повторения фо- ВОрҮ {Баскогоџпа-гереас: 
нового изображения по-гереас; } 


хереае | гереас-х | 
гереаЕ-у | по-гереас 
Ъаскагоипа-аекасьщейе Устанавливает возможность — ВОБУ {Ъаскагоцпа-аЕъасьтепЕ: 
прокрутки фонового изобра- всгої1;) 
жения вместе с элементом 
зсго11 | іхей 


Ђаскагоцпа-роѕібіоп Устанавливает начальную по-  ВОБУ {Баскотоџпа-розісіоп: 
зицию фонового изображения Сор сепеек; } 
в процентах, абсолютных вели- 
чинах или с помощью ключевых 
слов сор сепеек | Богом 


гідһс итд. 

Ђаскагоџпа Сокращенная запись опреде Р ( Баскагоџпа: 
ляет свойства фона в любом іх1("сћеѕѕ.рпд") агау 50% 
тюрайне тереае Ғіхеа } 


Шрифт 


Возможности управления шрифтами в С$5 не намного шире, чем в НТМІ.. Но, тем не 
менее, использование С$$ дает некоторые преимушества, и, в первую очередь, пользо- 
ваться С88 гораздо удобнее, в чем вы скоро убедитесь. Кроме этого, написание правил 
С85 для текстовых блоков позволяет значительно сэкономить на объеме НТМІ -кода. 
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Для задания параметров шрифтов в НТМЕ. используется элемент ЕОМТ. С его помо- 
щью можно задавать гарнитуру шрифта (атрибут Еасе), размер (512е) и цвет (со1ог). 
Управление начертанием шрифта осуществляется с помощью других элементов, напри- 
мер тив. В С$$ все то же самое реализуется при помощи свойств. 


Свойство Тот{-Татйу 


Это свойство задает гарнитуру шрифта. Как вы уже знаете, все шрифты (гарнитура — 
синоним понятия “шрифт”) делятся на несколько групп, или семейств. 


• 5е/— шрифты с засечками, такие как Тітеѕ Мем Котап. Подобным шрифтом 
набран основной текст этой книги. 


»® 5а75-5ег/ — шрифты рубленые, без засечек, например Апа!, Уегдапа или Таһота. 
Подобным шрифтом в этой книге набраны заголовки. 

* Мопозрасе — моноширинные шрифты (с одинаковым расстоянием между симво- 
лами, наподобие печатной машинки), такие как Соипег №еу. Такой шрифт ис- 
пользован в этой книге для набора НТМІ.-кода. 

® Сиғіуе — шрифты курсивные, такие как Са!іѕ1о МТ. 


• ГҒапіаѕу — декоративные шрифты, буквы которых могут имитировать, например, 
рукописный текст. 


Примеры фрагментов текста, написанных шрифтами разных семейств, мы приводили 
ранее (см. рис. 2.3). 

В качестве значения свойства опе - Ғаті 1у указывается название гарнитуры или се- 
мейства шрифтов. Рассмотрим пример задания гарнитуры шрифта для текста в абзацах: 
и $ 


} 


ЕопЕ-Еапа1у: Агіа1, взапз-век1Е 


В этом случае текст внутри абзацев будет написан гарнитурой Апа|, а в том случае, ес- 
ли такого шрифта на компьютере посетителя У\еБ-страницы не окажется, то вместо гар- 
нитуры Апа! будет использоваться любой шрифт семейства ѕапз-ѕеліу: Таким образом, да- 
же при отсутствии нужного шрифта он будет заменен наиболее близким ему по виду, 
и внешний вид страницы будет не очень сильно отличаться от задуманного автором. 

В НТМЕ для этой цели используется атрибут Еасе элемента РОМТ, причем между те- 
гами <РОМТ> </РОМТ> необходимо помещать каждый фрагмент текста, гарнитуру шриф- 
та которого вы захотите изменить. В С$5 все гораздо проще — достаточно написать соот- 
ветствующее правило для нужного селектора. Для сравнения приводим способ задания 
используемого шрифта при помощи С$$ и только на НТМІ. (табл. 11.5). 


Таблица 11.5. Задание гарнитуры шрифта в НТМІ. и С55 


НТМІ. С55 
<Р><ЕОМТ Ғасе="Агіа1, Р{ 
запз-вег1Е">Текст абзаца будет написан  ФопЕ-Еала1у: Агіа1, запѕ-вегіЁ 


шрифтом Агіа1.</ЕОМТ></Р> 


<Р>Текст любых абзацев будет написан 
шрифтом Агіа1</Р> 
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Свойство ѓїопї-ѕїуіе 
Свойство задает стиль шрифта. Допускаются значения: 


® погпа1 — обычный; 
е орІіче — наклонный; 
е 11а11с — курсивный. 


Возникает справедливый вопрос: чем отличается шрифт “курсивный” от “наклонного”? 
Суть в том, что значение і са1іс использует встроенное в шрифт курсивное начертание. Как 
правило, набор символов шрифта включает набор букв нормального начертания (погтпа1), 
полужирного (ро19) и курсивного (і са1 іс). Иногда в шрифт включается набор комбинаций 
полужирного курсива (501 іба1іс), возможны и другие варианты начертания. Если 
в шрифт не включены наборы Бо1& и іса1іс, то полужирное начертание имитируется утол- 
щением букв, а курсив имитируется простым наклоном букв шрифта, что и соответствует зна- 
чению оБ1 1сте. По умолчанию для свойства используется значение погтпа1. 

С помощью этого свойства С5$ можно сделать, например, текст первого абзаца ста- 
тьи курсивным, при этом текст остальных абзацев будет обычным. Для этого нужно на- 
писатьтакие стили: 


Р( 
ЕопЕ-Еапц1у: Агіа1, запз-вег1Е 
} 
Р.Ғікзі ( 
Еопі-вру1е: іба1іс 
} 
<Р сІаѕв=" Ёігві">Текст первого абзаца, а также всех тех, для которых будет 


указан атрибут с1азз="Е1кзЕ", будет набран шрифтом с курсивным начертани- 
ем.</р> 
<Р>Текст последующих абзацев будет написан обычным шрифтом. </Р> 
При помощи свойства ЕопЕ-зЕу1е можно изменить начертание шрифта в элементах 

НТМЕ, отображающихся в браузере курсивом, — это элементы І и ЕМ. Сделать это мож- 
нотак: 
ЕМ { 

Ғопі-вбу1е: погта1; 

со1ог: дхееп 


При этом слова, помещенные между тегами <ЕМ> < /ЕМ>, вместо курсива будут выде- 
ляться зеленым цветом. 


Свойство ѓопї-уагіапё 


С помощью этого свойства можно указать вариант написания букв из двух возмож- 
ных: обычный (погта1) или малые прописные буквы (ѕта11-сарѕ). Малые прописные 
буквы отличаются от обычных прописных слегка уменьшенным размером, т.е. они пред- 
ставляют собой нечто среднее межлу строчными и прописными буквами. Малые про- 
писные буквы можно использовать, например, для вывода текстов заголовков. 


ні, н2, НЗ, на, н5, Нб ( 
Ғопс-уагіапё: зта11-сарз 
} 


Для записи этого правила мы использовали группировку селекторов, указав их через за- 
пятую, поэтому все заголовки в документе будут выводиться малыми прописными буквами. 
По умолчанию весь текст пишется обычными буквами — ЕопЕ-уахзапе: погта1. 
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Свойство їопї-меідћї 


Это свойство определяет насыщенность шрифта; с его помощью можно указать, дол- 
жен ли он быть обычным или жирным. В качестве значений допускаются следующие 
числа: 100, 200, 300, 400, 500, 600, 700, 800, 900. Надо сказать, что браузеры не под- 
держивают все девять возможных оттенков насыщенности. 

Обычному шрифту соответствует ключевое слово погта1, его числовой эквива- 
лент — 400. Это значение используется по умолчанию. Полужирному соответствует 
ключевое слово Бо], и его числовой эквивалент — 700. 

Таким образом, если написать правило 


н { 
ЕопЕ-шезове: Ьо1а 
} 


и правило 


н ( 
Еопе-меідће: 700 
} 


то они будут абсолютно идентичны. 

Кроме этого, есть еще два ключевых слова 1ісћсег и Бо14ехк, которые могут делать 
шрифт менее насыщенным или более жирным по отношению к базовому шрифту, унас- 
ледованному от предка соответственно. 

Например, для текста абзаца можно установить полужирную насыщенность шрифта, а для 
цитат внутри абзацев текст сделать менее насыщенным, используя контекстный селектор: 

в ( 

Еопе-мезанЕ: Бо1а 

} 

Р СІТЕ { 
Ғопс-5су1е:погта1; 
ЕопЕ-мезаве: 1ісћеег 

т 


<Р>Текст абзаца набран жирным шрифтом, тогда как <СІТЕ>цитата внутри него на- 
брана менее насыщенным некурсивным шрифтом. </СТТЕ></Р> 


Для сравнения приводим способ задания полужирного шрифта при помощи С$$ и 
только на НТМЕ (табл. 11.6). 


Таблица 11.6. Задание полужирного шрифта в НТМЬ и С55 
нтмЕ С55 


<Р><В>Текст только этого абзаца будет Р { 
написан полужирным шрифтом. </В></Р> Ғопе-меісће: Бо1а 
} 


<Р>Текст любых абзацев будет написан 
полужирным шрифтом. </Р> 


Свойство ѓопї-ѕіге 


Данное свойство позволяет указать размер используемого шрифта. Делать это можно 
несколькими способами, но следует помнить о тех ограничениях, которые они за собой 
влекут. Но обо всем по порялку. 
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Как вы помните, в НТМІ. размер шрифта задавался при помощи атрибута ѕіге эле- 
мента ҒОМТ. Размер указывался в численном выражении от 1 до 7. Значением по умолча- 
нию является 3. 

Первый способ указать размер шрифта в С$5 — по ключевым словам, которых тоже семь: 


® хх-ѕпаіц; 
• х-вта11; 
® зта11; 

® пед1им; 

е 1агае; 

• х-1агде; 
® хх-1агде. 


При использовании ключевых слов реальный размер шрифта зависит от браузера и опе- 
рационной системы. В спецификации С$$ 2 по этому поводу сказано только следующее: 
коэффициент увеличения размера шрифта в браузере должен составлять 1,2. Поэтому, ес- 
ли, например, для ключевого слова тедіџт устанавливается размер в 12 пунктов, то для 
ключевого слова 1агде размер шрифта должен быть 14,4 пунктов, т.е. в 1,2 раза больше. 
Следует отметить, что в спецификации С$$ | этот коэффициент был равен 1,5. Однако 
практика показала, что это значение слишком велико, поэтому оно было уменьшено до 1,2. 
Браузерами же не соблюдается ни та, ни другая величина. Увеличение и уменьшение 
шрифта происходит на некоторый произвольный коэффициент, который у каждого брау- 
зера свой. 

Так, в браузере Іпіегпеі Ехріогег значению теді ит реально соответствует шрифт раз- 
мером 13,5 пунктов. Поэтому для данного браузера правила: 


нз { 
Ғопс-віге: тейішл 


и 


нз ( 
Ғопі-ѕіге: 13.5рЕ 


будут одинаковы. А вот в браузере МогШа размер шрифта, указанного при помощи клю- 
чевого слова теді шт, будет равен уже 12 пунктам. Согласитесь, разница довольно суще- 
ственная. 


мощи ключевых слов довольно сложно с точки зрения “одинаковости” отображения 
кода в разных браузерах. Поэтому, чтобы во всех браузерах размер оказался одинако- 
вым, нужно использовать второе правило или указывать размеры в величинах ет. 


Есть еще два ключевых слова, позволяющие залавать относительные размеры: 
вта11ег (шрифт уменьшается на один размер) и 1агдех (шрифт увеличивается на один 
размер относительно родительского элемента). 

Следовательно, если размер родительского элемента был залан как тедішт, то при 
указании свойства Ёопе -5і2е : эща11ег он станет эквивалентен ѕща11, а при указании 
свойства ЕопЕ-512е :1акаек размер будет соответствовать ключевому слову 1агде. 

Относительный размер шрифта можно задавать и в процентах (второй способ). 
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СІТЕ( 
ФопЕ-512е: 120% 
} 


Тогда размер шрифта цитат будет на 20% больше, чем у элемента-предка. 
То же самое можно сделать, указав размер шрифта в единицах измерения еп: 
СІТЕ{ 
Ғопе-віте: 1.2еп 
} 


1 
Предупреждение. Обратите внимание, что для указания дробных значений в С55 
требуется в качестве разделителя использовать точку (.), а не запятую (,), как мы 
привыкли. Правило 


СІТЕ{ 
Ғопі-ѕізе: 1,2ет 
} 


работать не будет из-за наличия запятой в задании дробного значения. 


Третий способ указать размер шрифта — задать его в любых единицах длины: пиксе- 
лях, пунктах, сантиметрах или миллиметрах. Например, зададим значение в пикселях: 


Р( 
ЕопЕ-812е:12рх 
} 


Этот способ универсален с той точки зрения, что при таком способе задания размер 
шрифта будет одинаковым в любом браузере, чего очень трудно добиться при использо- 
вании ключевых слов. При задании размера в пикселях следует помнить о том, что это 
относительная величина и размер букв будет зависеть от разрешения экрана. 

Также нужно иметь в виду, что в НТМІ размер шрифта по умолчанию равен 3. В С$$ 
это значение шеа1 лит, т.е. здесь шкала размеров симметрична, тогда как в НТМ!. — нет. 
Здесь налицо некоторое несоответствие, но оно не является определяющим. С установ- 
кой размера шрифта есть куда более интересные моменты — как, например, несоответ- 
ствие размеров шрифта, определяемого ключевыми словами. Но и их можно устранить. 
Как это можно сделать, узнаете в следующих разделах. 

Для сравнения приводим способ залания размера шрифта при помощи С$$ и только 
на НТМЕ (табл. 11.7). 


Таблица 11.7. Задание размера шрифта в НТМІ и С55 


нтмі. С55 
<Р> <РОМТ в12е="4">Текст абзаца Р{ 
будет написан шрифтом размера 4, Ғопс-віғе: педішп 


соответствующего значению тедіаш в } 

С55.</ВОМТ></Р> ОЗ нива д 
<Р>Текст абзаца будет написан шрифтом 
среднего размера, соответствующего 
размеру 4 в НТМІ.</Р> 


Свойство їопё 


Стенографическое свойство Ғопе позволяет в краткой форме записать все возможные 
свойства шрифта. 
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Например, правило 


Р{ 
ФопЕ-Еапы Лу: Агіа1, запз-век1Е 
ЕопЕ-зЕу1е: іса1іс; 
Ғопс-уагіапс: эта11-сарз; 
Ғопё-ѕіте: 12ре; 
у 
можно записать короче следующим образом: 


Р{ 
ЕопЕ: іба1іс ѕта11-сарз 12рЕ Агіа1, ѕапз-ѕегіє 
} 
Порядок записи этого свойства должен быть таким (значения всех свойств записыва- 
ются через пробел): 


• первой идет запись группы свойств ЕопЕ-5еу1е, Ёопе-уагіап и Ғопе- 
меісће, любое из которых может быть пропущено; 


® затем обязательно указывается размер шрифта, т.е. значение свойства Еопс-ѕі2е, 
и через слеш (“/”) за ним можно указать высоту строки (высота строки задается 
свойством 1іпе-һеісһе, но мы его пока еще не рассматривали); 


• последней обязательно указывается гарнитура шрифта, т.е. значение свойства 
Еопс-Еат1 Ту. 


Из этого следует, что в краткой записи обязательно должны присутствовать два зна- 
чения: размер шрифта и используемая гарнитура, т.е. правило 


Р( 
Еопе: Агіа1, ѕапѕ-векіє 
} 


будет некорректным. вместо этого следует использовать полную форму, а не сокращенную: 
Р( 


} 


ЕопЕ-Еапй1у: Агіа1, ѕапѕ-ѕегіғ 


Очень часто об этом забывают, а некорректно написанное правило просто игнориру- 
ется браузером, из-за этого возникают неожиданные проблемы: гарнитура задана, но 
браузером не воспринимается. 


Предупреждение. Браузер Іпіегпе! Ехріогег 5.0 некорректно работает с этим прави- 
лом, поскольку допускает в краткой форме залание значений любых двух свойств, 
что неправильно. Таким образом, правило | 


Р( | 
ЕопЕ: іба1іс 12рЕ 
} 


| 
в иегпее Ехрюгег 5.0 работать будет, а в остальных браузерах, корректно работаю- | 
щих в соответствии со стандартом С$$ 1, оно восприниматься не будет. Будьте | 
| внимательны при использовании краткой формы Еопе! 


Все свойства, залающие параметры шрифта, являются наследуемыми. Это можно ис- 
пользовать для залания параметров шрифта по умолчанию для всей страницы целиком. 
При этом в качестве селектора в правиле нужно использовать элемент верхнего уровня, 
например НТМІ, или ВОрү. Так как все остальные элементы, отвечающие за формирова- 
ние страницы в дереве элементов, будут являться их потомками, то они, соответственно, 
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унаследуют свойства шрифта от своих родителей. В тех элементах, оформление которых 
должно отличаться, эти параметры можно переопределить. 

Приведем пример. Зададим для всего текста на \МеБ-странице шрифт Апа! синего цве- 
та, а для заголовков второго уровня будем использовать гарнитуру Тітеѕ Ме\м Вотап 
и жирные малые прописные буквы зеленого цвета. 


вору ( 

со1ог: Ы1џе; 

ФопЕ: щели Агіа1, запз-зек1Е; 
} 


н 
со1ок: дкееп; 
ҒопЕ : вта1]-сар= х-1акае "Тіпеѕ Мем Копап", егі; 


Названия шрифтов, включающие пробелы, следует брать в кавычки, как в приведенном 
выше примере: “Тітеѕ Мем Котап”. Вообще-то, гарнитура Тітеѕ Мем Котап используется 
по умолчанию, однако здесь мы ее явно указали по двум причинам. Во-первых, требовалось 
переопределить шрифт заголовков. Во-вторых, нужно было показать, что названия шриф- 
тов, состоящие из нескольких слов, следует заключать в кавычки. 

Краткое описание всех свойств шрифта приведено в табл. 11.8. 


Таблица 11.8. Свойства шрифта в С55 
Свойство Описание Пример 


Ғоп-Ғаті1у Назначает шрифт либо семейство шрифтов Р {Ғопс-Ғаті1у: не1уесіса, 
вапз-ѕегіѓ;) 


Топе-56у1е Устанавливает курсив или наклонный шрифт ЕМ {Ғопе-=су1е: погта1; } 
ісаііс | оБ1іые | похта1 


Еопе-уагіапё Устанавливает регистр НЗ {опЕ-уахфапе: 
ѕта11-сар= | погта1 ѕта11-сарз; } 
Ғопе-меісћ—е Определяет жирность шрифта В (Ғопс-меісће: 700; } 


Ъо1а | погша1 | 100..900 


ЕопЕ-512е Устанавливает размер шрифта в абсолют- Н2 (Ғопс-ѕіте: 200%; } 
ных, относительных размерах или в процен- НЗ {Еопе-в1хе: З6ре; } 
тах, а также при помощи ключевых слов: 
хх-вта11 | х-эта11 | ѕта11 | пей ит 
| 1акде | х-1аксе | жх-1ахае 


опе Сокращенная форма записи всех предыду- Р (Ёопе: Ъо14 12рь/ 
щих свойств — устанавливает свойства 14рЕ Не1чесіса, запѕ-вегі; } 
шрифта в следующем порядке: ЕопЕ: 
Ғоп-ѕбу1е опЕ-уахфапЕ Еопі-меісће 
Ғопё-віге/Ііпе-Пеісће ЕопЕ-Еапа1у. 
Любое из свойств, кроме ЕопЕ-512е 
и Ёопе- Ғапі1у, может быть пропущено 


Изменение размера шрифта в браузере 


Вы знаете, что размер шрифта можно выбрать непосредственно в браузере, восполь- 
зовавшись командами меню Вид. Браузер Іпіегпе! ЕхрІогег в подменю Размер шрифта 
предоставляет для выбора слелующие значения размера шрифта: 
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• Самый крупны 
• Крупный; 

• Средний; 

» Мелкий; 

• Самый мелкий. 


Браузеры Орега и Мох Ша в подменю Масштаб/Хоот позволяют масштабировать 
страницу в процентах: 


• 50% — в два раза меньше реального размера; 
е 100% — соответствует реальному размеру; 
® 150% — в полтора раза крупнее и т.д. 


Например, автор создал свою страницу из расчета, что ее будут просматривать с раз- 
решением экрана 800х600, потому он установил размер шрифта для основного текста 
равным 10 пикселей. При таком разрешении этот текст будет нормально читаться, но ес- 
ли разрешение окажется в несколько раз больше, к примеру 1280х1024, то текст окажется 
слишком мелким. Тогда посетитель сможет увеличить текст на странице, воспользовав- 
шись встроенной возможностью браузера сделать это. Данная функция также незамени- 
ма для людей с ослабленным зрением. 

Однако в Іпіегпе! Ехрюгег (на настоящий момент он является самым распространенным 
браузером) изменение размера шрифта в самом браузере при помощи описанных выше ко- 
манд меню влияет только на те фрагменты текста, для которых размер шрифта задан при 
помощи ключевых слов. Если же размер задан фиксированным значением, т.е. явно указан 
в некоторых единицах измерения, то фрагменты такого текста свой размер менять не будут 
ни при самом мелком шрифте, ни при самом крупном. 

Браузеры Орега и Мо7Ша корректно масштабируют текст страницы независимо от 
того, каким способом задан размер текста: ключевыми словами или в конкретных еди- 
ницах измерения. Причем браузер Орега действительно увеличивает масштаб страницы 
целиком, меняя размер не только текста, но и всех остальных элементов, включая рисун- 
ки. В браузере МогШа этот пункт меню называется Масштаб текста/Техі 200т, и поэто- 
му меняется только масштаб текста, графические же элементы при этом своего размера 
не меняют. 


Текст и его свойства 


До сих пор мы рассматривали только свойства шрифта. Свойства текста позволяют 
задавать параметры не букв, а слов, предложений и их взаимного расположения. Если 
проводить аналогии с текстовыми редакторами, то сейчас мы будем заниматься форма- 
тированием абзацев и слов внутри них. 

Свойство їехі-десогайоп 

Это свойство позволяет оформлять текст. Допускаются такие значения: 

® попе — не производится никакого дополнительного оформлен, ия текста; 

® опдег1іпе — каждая строка текста подчеркивается; 


• оуег1іпе — каждая строка текста надчеркивается линией, расположенной над 
текстом, — своеобразное подчеркивание, только сверху; 
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® 1іпе-Сһгоџдћ — каждая строка текста отображается зачеркнутой; 


® Ь1іпк — на экран выводится мигающий текст (для текста меняются состояния 
“видимый” и “невидимый”). 


Значение опаег1іпе соответствует элементу Ц в языке НТМЕ, а значение 1іпе- 
Єћгоџаћ аналогично элементу 5. Существует еше и элемент ВЫТМК, содержимое которого 
выводит мерцающий текст, но он поддерживается только браузерами Ме(саре (Мо2Ша в 
том числе) и последними версиями браузера Орега. Таким образом, для іміегпег Ехріогег нет 
возможности отобразить мерцающий текст, поскольку значение Ы1 іпк для свойства сех - 
десогабіоп не поддерживается, так же как не поддерживается и элемент ВЫТМК. 

Подчеркнутый, надчеркнутый и зачеркнутый текст на МеБ-страницах встретишь не- 
часто. Чаще всего свойство сехе-десогасіоп используется для того, чтобы убрать под- 
черкивание у ссылок. Для этого пишут такое правило: 

А:1іпк, А:уіѕібеа, А:асііуе { 
Сехс-десогасіоп: попе 
ү 

Можно включить подчеркивание для ссылок во время наведения на них курсора мыши. 
Тогда в обычном состоянии ссылки не будут подчеркнуты, а при наведении курсора подчер- 
кивание появится, как бы сигнализируя о том, что данный фрагмент текста является ссылкой. 


А:һоуег( 
Сехс-десогасіоп: ипдег1їпе 
} 


Как вы помните, средствами НТМІ мы так и не смогли убрать подчеркивание у ссы- 
лок в макете сайта, который верстали только при помощи средств НТМІ. в главе 8. Те- 
перь это можно легко сделать, но уже средствами С55. 


Свойство їехї-аїдп 

Данное свойство позволяет задать выравнивание текста относительно родительского 
элемента. Возможны значения: 

• 1еЕЕ — выравнивание по левому краю; 

* сепбек — выравнивание по центру; 

• к1арЕ — выравнивание по правому краю; 

• јоѕсіҒу — выравнивание по ширине. 

По большому счету, возможности этого свойства ничем не отличаются от возможностей 
атрибута а1іст различных элементов, но в НТМІ выравнивание приходилось задавать для 
каждого элемента, теперь же это можно сделать один раз, в соответствующем С$8-правиле. 


Для сравнения приводим способ выравнивания текста в абзаце при помощи С$$ и 
только на НТМЕ (табл. 11.9). 


Таблица 11.9. Выравнивание текста в НТМЬ и С55 


нтмі. с55 
<Р а119п=“ЗазЕ1Еу">Текст только этого Р ({ 
абзаца будет выровнен по ширине.</Р> сехе-а1490: јивсіѓу 


} 


<Р>Текст этого и других абзацев 
будет выровнен по ширине .</Р> 
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Свойство їехї-іпаепі 


С помощью этого свойства можно задать отступ первой, или красной, строки. При- 
меняется для элементов, определяющих блок текста, т.е. в первую очередь, для абзацев 
и заголовков. 

В качестве значения указывается размер отступа. Допускается задание значения в 
единицах длины и в процентах от ширины родительского блока. Допустимы в том числе 
и отрицательные значения. В результате получаем так называемую висячую строку. Одна- 
ко следите за тем, чтобы при создании висячей строки часть текста не попала за пределы 
экрана — чтобы этого не произошло, нужно дополнительно задавать отступы для тексто- 
вого блока с помощью свойств группы рааа1 па. 

Рассмотрим правило 
Р{ 

Бехр-іпдепі: - 2ет; 

райаіпа: 30рх 


Текст такого абзаца в браузере будет выглядеть примерно так, как показано на 
рис. 11.1. Обратите внимание: поля, заданные в размере 30 пикселей (радаіпс: З0рх), 
не позволяют тексту скрыться за пределами окна. 


1 


Допустимы, в том числе, н отрицательные значения. 
В результате получаем так называемую висячую 
строку. Но следите, чтобы часть текста не попала 
за пределы экрана. 


готово Т нзконыютер 


Рис. 11.1. Первая строка абзаца имеет выступ, соз- 
данный при помощи свойства сехЕ-1п4епе 


Свойство їехі-ігапѕѓогт 


Это свойство отвечает за видоизменение текста — в частности, его регистра. Сменой 
регистра называют замену прописных (заглавных или больших) букв на строчные (или 
маленькие) буквы. Допустимы следующие значения. 


е саріба1іте — меняет регистр первых букв каждого слова так, чтобы они были 
заглавными. Это значение полезно для заголовков, написанных на английский 
манер, где каждое слово должно обязательно начинаться с большой буквы. В рус- 
ском языке такое написание требуется редко. 

• џррегсаѕе — меняет регистр всех букв на прописные. Таким образом можно 
оформлять заголовки — это альтернатива малым прописным буквам, которые 
можно получить при помощи свойства ЕопЕ-уакзапе: эта11-сарз. 

е 1омегсаѕе — меняет регистр всех букв на строчные. 


• попе — не производит смены регистра; это значение используется по умолчанию. 
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Приведем пример заголовка в стиле, принятом в англоязычных странах, где первые 
буквы всех слов будут заглавными. 


нз{ 


сехЕ-Егапзбога: саріба1іге 


} 


<НЗ>Заголовок, выдержанный в английском стиле</НЗ> 


В НТМЕ нет атрибута или элемента, подобного этому свойству. 


Свойство хегісаі-аіідп 


При использовании этого свойства можно задать вертикальное выравнивание текста 
относительно блока. В случае таблиц это свойство работает немного по-другому, поэтому. 
в контексте таблиц мы рассмотрим его отдельно, чуть позже. 

Допустимые значения залаются следующими ключевыми словами. 


Ъазе11пе — выравнивание базовой линии блока относительно базовой линии его 
родительского блока. Если у блока нет базовой линии, то выполняется выравни- 
вание его нижней границы относительно базовой линии родительского блока. 
п1аа1е — выравнивание средней по вертикали точки на уровень родительского 
блока, определяемый значением: базовая линия плюс половина значения свойства 
х-ћһеісһе (высота блока). 

зир — смещение базовой линии блока вниз до уровня, отведенного для нижних 
индексов. (Это значение не влияет на размер шрифта текста элемента.) Аналог 
элемента зов в языке НТМІ.. 

зирег — смещение базовой линии блока вверх до уровня, отведенного для верх- 
них индексов блока. (Это значение не влияет на размер шрифта текста элемента.) 
Аналог элемента 50Р в языке НТМЕ. 

сехе-сор — выравнивание верхней границы блока относительно верхней кромки 
шрифта родительского элемента. 

Сехс-робсот — выравнивание нижней границы блока относительно нижней 
кромки ‘шрифта родительского элемента. 


При задании значения в процентах осуществляется смешение блока на заданную ве- 
личину вверх (если задано положительное значение) или вниз (если задано отрицатель- 
ное значение). Значение 0% аналогично значению раѕе1іпе. Проценты вычисляются 
относительно значения свойства 1іпе-ћеісће, т.е. высоты строки. 

При задании значения в единицах длины осушествляется смещение блока на задан- 
ную величину вверх (положительное значение) или вниз (отрицательное значение). Зна- 
чение Ост аналогично значению раѕе1іпе. 

Так же при выравнивании относительно линейного блока можно использовать сле- 
дующие ключевые слова: 


Сор — выравнивание верхней границы блока относительно верхней границы ли- 
нейного блока; 


Ъоссот — выравнивание нижней границы блока относительно нижней границы 
линейного блока. 


Краткое описание всех свойств текста в С5$ приведено в табл. 11.10. 
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Таблица 11.10. Свойства текста в С55 
Свойство Описание Пример 


бехе-десогасіоп Определяет внешний вид, оформлениетек- О (бехе -десогасіоп: 
ста: подчеркивание или мигание. Значения Чпдег1іпе; } ў 
задаются при помощи ключевых слов: «98 (бвхезаасоғаргап: 
попе | опдег1іпе | оуег1іпе | 11пе-0гооаћ; } 
14іпе-еһгоцдћ | Б1іпк 


бехс-а1ідп Определяет тип горизонтального вырав- Р (Сехс-а1їсп: јизеі е, 
нивания текста: на (сехе-а119т: сепсет 
сепсег | казане | 1еЕе | јиѕеіғу 


кехе-1п4епЕ Определяет размер отступа (красной Р {сехе-іпдепс: бе; } 
строки), значения задаются в единицах Н2 (сехс-іпдепе: -25рх; } 
длины или процентах, допустимы отрица- 
тельные значения, позволяющие созда- 
вать висячую строку 


бехс-сгапвғотт Определяет трансформацию или, по- ні (Сехс-Сгапзёохт: 
другому, изменение регистра текста при Чррессаѕе; } 
помощи ключевых слов: 
сарісаІіте | џррегсаѕе | 
10ҹеғсазе | попе 


уегсіса1-а1їсп Определяет вертикальное выравнивание 1МС (уегбіса1-а1ідп: 
текста — значение задается при помощи 600; } 
ключевых слов и может быть задано отно- 
сительно родительского элемента или ба- 
зовой линии: 
Баве1іпе | виь | ворек | Кор | 
сехЕ-Еор | тіад1е | Боёсот | 
сехе-Ьроссот |. Допустимо задание ве- 
личины смещения в процентах или еди- 
ницах длины 


Интервалы 


Как правило, для каждого шрифта определенного размера заранее установлены величины 
пробелов между словами, расстояние между буквами внутри слова и визуальная высота стро- 
ки. Следует отметить, что расстояние между разными буквами в моноширинных шрифтах, та- 
ких как Соипег №ем, всегда одинаковое. В других типах шрифтов межбуквенное расстояние 
зависит от буквосочетаний — в большинстве случаев оно фиксировано, но между некоторыми 
парами букв оно намеренно уменьшается, чтобы визуально сделать текст более “ровным” 
и равномерно распределенным. Например, между буквами АУ расстояние меньше, чем между 
буквами НП, так как буквы Н и П по своей форме прямые, а буквы А и У со скосами, причем 
направленными в одну сторону. При одинаковом расстоянии между буквами, А и У будут ка- 
заться стоящими дальше друг от друга, чем Н и П. Для того чтобы смягчить этот эффект, рас- 
стояние между ними чуть-чуть уменьшается, в результате чего визуально строка текста вырав- 
нивается. Это явление — олно из ярких проявлений обмана зрения. 

В С55 для текстовых блоков можно регулировать размеры расстояний между словами 
в тексте, т.е., по сути, менять размер пробела. Также можно менять расстояния между бу- 
квами внутри слова (т.е. создавать уплотненный или разреженный текст) и управлять вы- 
сотой текстовой строки. Высота строки — это расстояние между базовыми линиями двух 
соседних строк. 

Аналогов таких свойств в НТМЕ. нет. Интервалы можно задавать только средствами С$$. 
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Свойство мога-ѕрасіпо 


Это свойство позволяет задать расстояние между словами. В качестве значения до- 
пускаются любые единицы длины, как с положительными значениями, так и с отрица- 
тельными. При отрицательных значениях расстояние между словами уменьшается, и при 
слишком больших значениях слова могут сильно “сближаться” или даже “наезжать” друг 
на друга. Это отрицательно скажется на читаемости текста, поэтому будьте аккуратнее 
при задании таких значений. Задание значений в процентах не допускается. 

Рассмотрим пример 
Р{ 

; чогӣ-ѕрасіпа: 2ех; 


<р>Расстояние между словами в этом абзаце будет больше, чем обычно. </Р> 


В окне браузера Мох Па текст с измененным расстоянием между словами будет выгля- 
деть так, как показано на рис. 11.2. 


Е задате интервалов Магда 


Параграф с расстоянием между словами, равным 1 


Параграф срасстоянием междусловами, равным -0 2ех 


Рис. 11.2. Изменение расстояния между словами с помощью 
свойства мога-ѕрасіпа 


Свойство Іейег-ѕрасіпо 


Данное свойство задает расстояние между буквами внутри слова. Задается аналогично 
расстоянию между словами в любых единицах длины. Допускается задание отрицатель- 
ных значений, при которых буквы могут слишком плотно примыкать друг к другу или 
даже налегать друг на друга. Поэтому пользуйтесь им осторожнее. Задание величины в 
процентах не допускается. 

При помощи этого свойства можно разрежать буквы, например в заголовках, что вы- 
глядит довольно оригинально. При этом рекомендуется, чтобы, с одной стороны, рас- 
стояние между буквами было увеличено настолько значительно, чтобы визуально заголо- 
вок выделялся на фоне обычного текста, а с другой стороны — разрежение не должно 
быть слишком большим, чтобы не ухудшалось общее восприятие текста. 

Оба свойства мога-ѕрасіпа и 1екЕех-врас1па можно использовать совместно, 
так как при увеличении расстояния между буквами, для того чтобы сохранить читаемость 
и разделить слова, может потребоваться одновременно увеличить и расстояние между 
словами. Вот типичный пример оформления заголовка: 
нц 

мога-врас1та: 2ех; 
1еккег-врас119: 0.Зех 
} 


<Н1>Разреженный заголовок</ні> 
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Свойство Ііпе-һеідћї 


Данное свойство позволяет задать расстояние между строками текста, т.е. расстояние 
между двумя базовыми линиями соседних строк. Чаще всего высота строки немного боль- 
ше размера шрифта. Например, если размер шрифта 12 пунктов, то высота строки может 
равняться 14 пунктам. При этом небольшие расстояния (интервал) добавляются как до, так 
и после строки, благоларя чему строки текста визуально отделяются друг от друга. 

В качестве значений можно использовать только положительные величины, заданные 
в процентах или единицах длины. При задании в процентах стандартная высота строки 
изменяется соразмерно заданному значению. Можно также указывать в качестве значе- 
ний безразмерные единицы, которые, так же как и проценты, будут служить коэффици- 
ентом, на который ‘умножается стандартная высота строки. Вот типичный пример ис- 
пользования этого свойства: 

Р{ 


Ғопс-візе: 12рЕ; 
13пе-БефовЕ: 150% 
р) 


<Р>Расстояние между строками этого абзаца будет в полтора раза больше обычно- 
го, т.е. равно 18 пунктам.</Р> 
Написанное выше правило будет аналогично следующему: 


Р( 
ФопЕ-в1те: 12рЕ; 
Т1пе-везаве: 1.5 


Кроме того, высоту строки можно задать через слеш (/) от размера шрифта в стено- 
графическом свойстве опЕ: 


рү 
Ғопс: іса1іс 12ре/16рЕ Агіа1, ѕапз-вегіғ; 
} 
<Р>Расстояние между строками этого абзаца будет равно 16 пунктам.</Р> 


Аналога такого свойства в НТМЕ не существует. Краткое описание всех свойств 
управления интервалами в тексте приведено в табл. 11.11. 


Таблица 11.11. Свойства С55 для управления интервалами в тексте 
Свойство Описание Пример 


1ебсеү-ѕрасіп Определяет интервал между буквами внут- Р {(1ессег-ѕрасіпс: 0.1ет;} 
ри слова в единицах длины: пунктах, про- 
центах или относительных величинах (ет) 


мога-зрасіпсч Определяет интервал между словамии Р (моа-зрасіпо: 0.5ет;) 
буквами в пунктах, процентах или относи- 
тельных величинах (еп) 


13пе-везове Определяет величину междустрочного ин- Р {11пе-везаве: 18ре;} 
тервала в единицах длины или процентах Н2 (1і1пе-һеісһе: 200%; } 
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Глава 12 


Форматирование блоков 
и списки 


В этой главе... 


Блоки в НТМІ. и С85 
Поля 

Границы 

Отступы 

Отступы или поля? 
Списки 


Блоки в НТМЬи С$$ 


В языке НТМІ. все элементы можно разделить на два типа: блочные и строчные. 
Блочные элементы создают визуально самостоятельную структурную единицу — блок. 
Примером блочных элементов могут быть элементы н1—Н6, Р, РТУ. Как мы уже говори- 
ли ранее, они даже отделяются от других абзаиными отступами. 

Строчные элементы не создают визуальной самостоятельной структурной единицы 
и выводятся линейной строкой. Примеры: элементы І, В, 0, 5, ЕМ идр. 

Два блочных элемента не могут располагаться в одной строке, а два строчных, соот- 
ветственно, могут. 

Модель представления документов в С$5 также использует понятие блоков. Блоки 
в С58 представляют собой самостоятельную структурную единицу, имеющую форму 
прямоугольника. Каждый элемент в дереве элементов документа — самостоятельный 
блок. Из этого следует, что в С$$ есть блоки, которые структурно отделены от остальных, 
а есть строчные блоки, которые могут находиться внутри структурных блоков. 

Каждый такой блок обязательно имеет информационную часть, или содержимое, ко- 
торым может быть текст, изображение или другая информация. Эта часть блока называ- 
ется его контентом или содержимым. Например, для элемента Р содержимым блока яв- 
ляется текст абзаца. 

Вокруг области контента могут быть пустые, не занятые содержимым области, называемые 
полями (радаіло). С точки зрения дизайна поля обеспечивают для содержимого блока эсте- 
тически более привлекательный вид. При наличии полей определенного размера текст не 
примыкает вплотную к границам блока. Можно провести аналогию с полями, устанавливае- 
мыми при печати документов на бумаге. Если полей не было бы, то текст начинался бы прямо 
у края листа. При наличии полей имеются не занятые текстом области вдоль краев листа бу- 
маги, и текст, напечатанный на листе, в этом случае читать приятнее и удобнее. 

Непосредственно за полями проходит граница блока (Богдег), которая может иметь 
определенную толщину и стиль линий. Ширина блока может быть произвольной — от 
нулевой (граница в этом случае не видна) до произвольно заданной в единицах измере- 
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ниях длины. Стиль линий может быть различным, от простой линии до объемных вари- 
антов. Кроме того, граница может иметь произвольный цвет. 

Также блок может иметь отступы (паха п), это дополнительное свободное простран- 
ство вокруг границы блока. Согласно спецификации С55, поля, границы и отступы не 
входят в ширину блока. Таким образом, указывая ширину блока, вы задаете ширину 
лишьтой части блока, которая отведена для содержимого. 

На рис. 12.1 приведена обобщенная структура блока в С$$. 


. Ширина блока _ 
(ма) 


Высота 
блока „ 
(пе) 


Рис. 12.1. Структура блока в СЅ5 


Все поля, границы и отступы делятся соответственно на верхние, нижние, правые 
и левые. Для каждого из них можно задать значения независимо от других. 
Фон для различных областей блока задается следующим образом. 
~ Область содержимого: фон задается свойством Баскахоџпа элемента, порождаю- 
щего данный блок. 
® Поля: фон задается свойством раскаогоџпа элемента, порождаюшего данный блок. 


• Границы: вид границ определяется свойствами границ элемента, порождающего 
блок. Фона они не имеют, чаще всего это линии определенного стиля (пунктир- 
ная, сплошная и тому подобное), цвета и толщины. 


е Отступы: область отступов всегда прозрачна, соответственно, сквозь нее может 
просвечивать фон родительских элементов. Таким образом, отступы как бы насле- 
дуют фон от родительского элемента. 


Поля 


Это специальные области, позволяющие задать некое свободное, ничем не занятое про- 
странство вокруг границы блока. Регулируя величину полей, можно управлять расстоянием 
между блоками, например уменьшить или увеличить абзацный отступ между абзацами. 


Свойства тагдіп-їор, тагдіп-гідһї, тагдіп-Бойот, тагот-еЯ 
Эти свойства определяют величину полей вокруг блока: 


е пагсіп-сор — задает ширину верхнего поля; 
е пағадіп-гісһе — задает ширину правого поля; 
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е пагд1п-БоЕЕошм — задает ширину нижнего поля; 
• пага1п-1еЁЕ — задает ширину левого поля. 


Значения могут задаваться в любых единицах длины, а также в процентах. Процент- 
ное соотношение в этом случае вычисляется относительно контейнера, породившего 
этот блок. Контейнером для любого блока служит родительский элемент. 

Давайте разберем способы задания полей на примере всей МеЬ-страницы. По умол- 
чанию в любом браузере они имеют определенное ненулевое значение. Помните, когда 
мы верстали страницы при помощи таблиц, вокруг таблицы присутствовали белые поля. 
Чтобы их устранить при помощи С$$, следует записать такое правило: 
вору ( 

пагдіп-сор:, Орх; 
тагдіп-гіоћс: 0рх; 
таксіп-Ьоббот: 0рх; 
тагдіп-1еёб: Орх; 


Если для страницы требуется установить поля по 10% от ширины страницы справа и 
слева, а поля сверху и снизу не нужны, то правило будет выглядеть так: 
Вору { 
такдіп-бор: Орк; 
тагдіп-гідћ: 10 


тахдіп-1еёс: 10%; 


В качестве значения может быть также использовано ключевое слово ацео, при этом 
величины полей вычисляются автоматически, и результат будет зависеть от множества 
факторов. Пока мы их подробно рассматривать не будем, поскольку еще не обладаем не- 
обходимым набором знаний, но позже обязательно вернемся к этому вопросу. 

В $ 
тагдіп-сор: ацсо; 
тахдіп-гісһће: аџёо; 
тагдіп-Боссот: аџсо; 
тагдіп-1еѓб: аџбо; 


Все поля для этого абзаца будут вычислены автоматически. 

Допустимы также отрицательные значения, в этом случае поля соседних блоков могут 
перекрываться. О таких ситуациях поговорим после того, как более подробно изучим 
блоковую модель С5$. 


Свойство тагдіп 


Это стенографическое свойство используется для краткой записи значений свойств 
пагодіп-Еор, магдіп-гічће, тагдіп-Боссот и тагдіп-1еёс. Свойство пахали мо- 
жет иметь одно, два, три или четыре значения. 

Если задано только одно значение, это означает, что величины полей со всех сторон 
одинаковые: 

р { 
тагодіп: 1ет 
} 


В данном случае для текста абзаца будет установлено одинаковое значение для всех 
четырех полей, равное высоте используемого шрифта. 

Если заданы два значения, то первое относится к верхнему и нижнему полям, вто- 
рое — к правому и левому, при этом значения кажлой пары булут равны. 
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ру { 
тағдіп: 10рх 5 рх 
} 


В данном примере для контейнеров ру будут установлены поля по 10 пикселей свер- 
ху и снизу и по 5 пикселей слева и справа. 

Если задано три значения, то первое применяется к верхнему полю, второе — к лево- 
му и правому, а третье — к нижнему. 
ворү{ 


тағдіп: Орх 15рх 5рх 


В этом примере страница не имеет верхнего поля, слева и справа поля одинаковы — 
по 15 пикселей, поле снизу равно 5 пикселей. 
Если заданы все четыре значения, то они соответственно будут отвечать верхнему, пра- 
вому, нижнему и левому полям. Иначе говоря, задание размеров начинается с верхнего по- 
ля и далее по часовой стрелке, заканчивая левым полем. Отсюда следует, что запись 
Р{ 
пагдіп-бор: 0.5ет; 
тагдіп-гісһе: 0.5ет; 
такдіп-Ьоссот: 0.5ет; 
тагдіп-1еёс: 1ет; 

} 

эквивалентна правилу: 

о 


3 


тагдіп: 0.5ет 0.5ем 0.5ет 1ем 


Замечание. Такой вариант стенографической записи является единственно воз- 
можным в том случае, когда для левого и правого полей требуется задать разные 
значения. 


В НТМІ. есть некий аналог этих свойств С$$. Это атрибуты росеоттагоіл, сор- 
пахаіп, Іе#спагоіп и гідћетагоіп. Применять их можно только в элементе ВОБУ 
для регулирования размеров полей страницы. При помощи свойств С$$ можно регули- 
ровать поля любых элементов, если, конечно, это поддерживается браузерами. Для всех 
элементов блочного уровня поля тахсіп поддерживаются без проблем, чуть хуже дело 
обстоит со строчными элементами. 


Для сравнения приводим способ задания полей для страницы при помощи ©С$5 
и только на НТМЕ, (табл. 12.1). 


Таблица 12.1. Задание полей страницы в НТМЬ и С55 


НтмЕ С55 
<вОру Боссотпагсіп="0" сортагдіп="0" ВОрҮ( 
1еҒспакдіп-"0" ғісћстагдіп="0"> такдіп: Орх 
Содержимое страницы -. ) 
</в00ү> ж. 
<вору> 
Содержимое страницы ... 
</ворү> 
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Границы 


Границы блоков, так же как отступы и поля, делятся на четыре сегмента: верхний, 
правый, нижний и левый. Каждый отдельный сегмент границы блока может иметь свои 
характеристики: цвет, толщину, тип линий. Для задания характеристик могут использо- 
ваться отдельные свойства или стенографические свойства, позволяющие записывать 
правила в более краткой форме. 


Свойства границ не являются наследуемыми. ] 


Свойства богдег-їор-місіћ, Богадег-гідћ-міаһ, БогдӢег-роНот-міаїћ, 
Богдег-Іей-міаћ 


Данные свойства определяют толщину границ блоков для верхнего, правого, нижнего 
и левого сегментов соответственно. Значения можно задать при помощи таких ключевых слов: 


* Е: — тонкая граница; 
• педіот — граница средней толщины; 
• сһіск — толстая граница. 


Какой толщины булет граница, зависит от браузера, но при этом обязательно выполнение 
следующего соотношения: ёћіт < тедіцт < Сһіск. Эти значения не должны изменяться на 
протяжении всего документа. По умолчанию используется ключевое слово пе лат. 

Толщину границы можно указать и в произвольных единицах измерения длины: пик- 
селях, пунктах, сантиметрах, миллиметрах и т.д. Недопустимо залание величин в процен- 
тах, а также отрицательных значений. 

Например, с помощью С$$ можно легко заключить в рамку текст, расположенный 
внутри абзаца. Так, например, можно оформить особо важную информацию — приме- 
чания, дополнения, особые замечания. 

Р{ 
Богдег-іор-міасһ: 1рх; 
Богдег-гіћ-міасһ: тедішт; 
Богдег-боссот-мійсћ 1рх; 
Богдег-1еЁс-мійеһ: ЕВ; 


Это правило задает только толщину границы, но не определяет ее цвет и тип линии. 


Свойство Ббогаег-уіаіћ 


Это свойство стенографического типа задает значения свойств рогаег-сор-міасћ, 
Богдег-гієће-мідсһ, БогдӢег-Бобсот-міасһ, Брогдег-1еёс-міасһ. Свойство 
Ђогӣег-міаєћ может имееть одно, два, три или четыре значения. 

Если задано только одно значение, это означает, что толщина всех сегментов границы 
вокруг блока одинакова: 

р ( 
Богдег-мідећ: 1рх 
} 

Текст абзаца будет обрамлен рамкой толщиной 1 пиксель. 

Если заданы два значения, то первое относится к верхнему и нижнему сегментам гра- 
ницы, второе — к правому и левому, при этом толщина сегмента в каждой из пар будет 
одинаковой, 
рту { 

у Ђогдег-міасћ: сһіп тедішп 
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В этом примере для контейнеров рту устанавливаются тонкие (ЕВ п) сегменты гра- 
ницы сверху и снизу контейнера и средние по толщине (тедіцп) слева и справа. 

Если задано три значения, то первое применяется к толщине верхнего сегмента гра- 
ницы, второе — левого и правого, а третье — нижнего сегмента. 


н1{ 


} 


В этом примере верхний сегмент границы заголовка отсутствует, слева и справа гра- 
ницы они будут одинаковы — по 1 пикселю, а толщина нижнего сегмента будет равна 2 
пикселям. 

Если заданы все четыре значения, то они будут отвечать толщине верхнего, правого, 
нижнего и левого сегментов границы соответственно. Иначе говоря, задание толщины 
сегментов границы начинается с верхнего и далее по часовой стрелке, заканчивая левым 
сегментом. Следовательно, запись 
Р 

Богдег-сор-мійєћ: 1рх; 

Богдег-гіће-мідєһ: тедішт; 

Богаег-Бобкот-міаєћ 2рх; 
Ъогдег-1Іеёс-мідєһ: ёһіп 


Ъогдег-міасһ: Орх 1рх 2рх 


} 
‘будет эквивалентна правилу: 
ж 


} 


Ъогдег-міаећ: 1рх шед1ит 2рх ЕВ1п 


Замечание. Такой вариант сокращенной записи является единственно возможным 
в том случае, когда для толщины левого и правого сегментов границы требуется за- 
ать разные значения. 


Свойство Богдег-соог 


Это свойство стенографического типа задает цвет границы блока. Если требуется за- 
дать различные цвета для четырех составляющих границ, то можно пользоваться индиви- 
дуальными свойствами: 


• Богаег-Кор-со1ок — цвет верхнего сегмента границы; 

® Богаег-гідће-со1ог — цвет правого сегмента границы; 

• Богаег-Боссом-со1ок — цвет нижнего сегмента границы; 

• Богаег-1еЕЕ-со1ох — цвет левого сегмента границы. 

Значением индивидуальных свойств может быть значение цвета, указанное любым 
доступным в С5$ способом: 

е ключевым словом (геад, уе11 о, ѕі1уег ит.д.); 


• шестнадцатеричным кодом цвета в полной форме (#00ЕЕСС, #ЕЕШРАА) или со- 
кращенно (#0ЕС, #ЕрА); 


• десятичным кодом в модели ВСВ (со1ог: г9Ъ(25, 205, 172)). 


В качестве примера раскрасим сегменты границы блока в разные цвета: 


р { 
Брогаег-сор-со1ог: кей; 
Богдег-гіће-со1ог: #ЕБА; 
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Богдекг-БоЕЕот-со1ог: #41А41С; 
Богаег-1еЁЕ-со1ог: г9Ы(25, 205, 172) 


Значение свойства Богаег-со1охг, которое является стенографическим, объединяет 
значения индивидуальных свойств. Единственное (но очень важное!) отличие в том, что 
в качестве значения свойства Богаег-со1ог может использоваться ключевое слово 
Сгапѕрагепе. При этом граница будет прозрачной, но все же будет иметь ширину. Дан- 
ное значение не поддерживается браузерами фирмы Місгоѕоћ — в них граница будет 
иметь либо цвет по умолчанию (черный), если цвет ранее не задавался, либо цвет, унас- 
ледованный от родительского элемента. 


Свойство богаег-ѕїуіе 


Это свойство стенографического типа задает тип линий, которыми будут отображать- 
ся границы блока. Если требуется задать различные типы линий для четырех составляю- 
щих границ, то можно пользоваться индивидуальными свойствами: 


• Богӣег-ёор-зсу1Іе — тип линии верхней границы; 

е рогдег-гічће-всу1е — тип линии правой границы; 

е Богӣег-россот-зѕбу1е — тип линии нижней границы; 
е Богаех-1еЕе-зеу1е — тип линии левой границы. 


Значением как индивидуальных свойств, так и стенографического может быть тип 
линии границы, определяемый одним из приведенных ниже ключевых слов. 


• попе — граница отсутствует, в результате значение свойства рогаег-міаєр так- 
же равно нулю. Это значение испол ьзуется по умолчанию. 

• Һіадеп — подобно значению попе, граница отсутствует, за исключением тех слу- 
чаев, когда такое значение будет применено лля таблиц. В этом случае будет ис- 
пользоваться принцип разрешения конфликтов границ; его мы рассмотрим позд- 
нее, когла будем изучать работу с таблицами в С$$. 

+ досЕеа — граница отображается линией, составленной из точек. 

= даѕһеа — граница отображается пунктирной линией. 

• зо1іа — граница отображается сплошной линией. 


• аоць1е — граница отображается двойной сплошной линией. Сумма значений 
ширины двух линий и расстояния между ними должна быть равна значению свой- 
ства Богдег-из Ен. Самая распространенная ошибка при использовании этого 
значения — задать ширину линии 2 пикселя и стиль аоцЫ1е. В этом случае не- 
возможно отобразить двойную линию, так как минимальная возможная ширина 
линии на экране монитора — 1 пиксель, поэтому для отображения двойной линии 
и расстояния между ними необходимо минимум 3 пикселя. Соответственно, при 
ширине в 2 пикселя двойную линию отобразить невозможно. В результате получа- 
ется обычная сплошная линия, но толщиной в 2 пикселя. 

• чкооуе — граница отображается “вдавленной” линией с имитацией объема. 


• гідде — противоположно значению сгооуе. Граница отображается “выпуклой” 
линией с имитацией объема. 


• іпѕес — граница отображается так, что весь блок выглядит как бы вдавленным 
(похоже на нажатую кнопку). 


® оцёЕѕес — противоположно значению 1пзее. Весь блок выглядит выпуклым. 
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Нарис. 12.2.-12.4 приведен внешний вид отдельных стилей границ в разных браузерах. 


-. " 


| Стиль границы #тооче = 
[Стиль границы тоог 
Стиль границы ошзеї | И Е 
Стиль границы ошзеї 
|Етнль границы на 


Е 
Рис. 12.2. Стили границ в браузере Рис. 12.3. Стили границ в брау- 
тете Ехрогег 6.0 зере Мога 1.6 


Ех траницы Зое 


ет 


Е 


2-4 


Стиль границы ятооуе 
|Сзильгранныы оша | 
Вельтаинщыяв 


Рис. 12.4. Стили границ в брау- 
зере Орега 7.51 
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Стенографическое свойство Богдег-зу1е по аналогии с богӣег-міаєЬ позволяет 
сокращенно записать значения стилей для всех четырех сегментов границы. Оно допус- 
кает задание одного, двух, трех или четырех значений. Применение этих значений ана- 
логично свойству рогаег-міаєћ. 

Р{ 
Богаег-веу1е: ѕо1іа аоксеа 
} 


<Р>Стиль верхней и нижней границы вокруг абзаца будет во14а, а для левой и 
правой — Фоббей. Довольно оригинальное решение, как вы считаете?</Р> 


Свойства богадег-їор, богаег-гідћї, Бог4ег-БоНот и Богдег-1е 


Все они — стенографические свойства, представляющие собой обобщения для зала- 
ния свойств рогдег-міасћ, рогаег-ѕсу1е и Богдег-со1ох соответствующих сег- 
ментов границы блока. Например: 

Р{ 
Богаег-кор: 1рх зо1іа геа; 
Богдег-гі9ће: 2рх зо1іа гей; 
Богдег-россот: 1рх 50114 гей; 
Богдек-1еЁЕ: 2рх 50119 гей 

у 


<Р>Границы вокруг абзаца будут красными, проведенными сплошной линией. Сверху 
и снизу толщина границ 1 пиксель, справа и слева — 2 пикселя.</р> 


Свойство Богдег 

Это свойство является стенографическим и используется для одновременного задания 
параметров всех четырех сегментов границы: ширины, цвета и стиля. В отличие от стено- 
графических свойств тагаіп и рааа1па, свойство Богаег не может устанавливать раз- 
личные значения для отдельных сегментов границы. Чтобы это сделать, необходимо ис- 
пользовать другие свойства границы, а именно Ъогӣег- сор, Богаег-кфаНе, Богаег- 
россоти Богдег-1еЕЕ. 
Р( 


} 


Ъогдег: 1рх 50114 кеа; 


<Р>Граница вокруг этого абзаца будет одинаковой со всех четырех сторон: 
сплошная линия красного цвета толщиной 1 пиксель.</Р> 


Отступы 


Отступы позволяют отделить основное содержимое блока от границы таким образом, 
чтобы траница располагалась на некотором расстоянии от содержимого. 


Свойства радаіпд-ќор, радаіпо-гідћї, раааіпо-бройот, райаіпа-Іе# 


Индивидуальные свойства, позволяющие задать размеры отступов для каждой сторо- 
ны в отдельности. 


• рада1па-Еор — ширина верхнего поля. 

е райдіпс-гісһе — ширина правого поля. 

• раадіпс-Бобсот — ширина нижнего поля. 
• рааатпа-1еЕЕ — ширина левого поля. 
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Значения свойств могут задаваться в произвольных единицах длины или в процентах. 
Проценты вычисляются относительно ширины сгенерированного элементом блока. Для 
отступов в качестве значений не допускается задание отрицательных величин — в отли- 
чие от полей, где отрицательные значения допустимы. 


Свойство радаіпо 


Это стенографическое свойство используется для краткой записи значений свойств 
радаіпа-гсор, радаіпо-гісће, раддіпс-боёсот и раддіпс-1еёс. Свойство раа- 
аіпа может иметь одно, два, три или четыре значения. Значения присваиваются так же, 
как для полей и границ. 

Рассмотрим такой код: 

Р{ 

БЂаскагоопа-соЈок: #ЕЕС 

Богаег:1рх во11а Ыше; 

райдіпа:0.5ет 1еп; 
О на примере этого абзаца рассмотрим, как работают отступы. </Р> 
<Р всуІе="раддіпд:Орх">А вот пример абзаца без отступов.</Р> 

В стиле для элемента Р указано, что фон его блока светло-желтый, вокруг блока име- 
ется синяя граница толшиной 1 пиксель, размеры отступов по 0,5 ет сверху и снизу и по 
1 ет слева и справа. 

Первый абзац оформляется именно таким стилем, для второго абзаца значение свой- 
ства ра@41 па переопределяется и устанавливается равным нулю. В результате, согласно 
правилам каскадирования, отступы у второго абзаца должны отсутствовать. В окне брау- 
зера мы увидим такую картину, как показано на рис. 12.5. 


На примере этого абзаца рассмотрим, 
ках работают отступы 


Рис. 12.5. Отступы, задаваемые свойст- 
вом рааа1т9 


Как вы видите, первый абзац действительно имеет отступы с заданными размерами. 
А вот у второго абзаца их нет, и текст плотно прилегает к границе блока — особенно чет- 
ко это видно у левой границы, причем визуально все это выглядит не очень хорошо. На 
мой взгляд, вариант с отступами более привлекателен, тем более что размер отступов 
можно регулировать и для каждой стороны задавать их отдельно. 
Различные отступы для отдельных сторон блока можно задавать при помощи имен- 
НЫХ СВОЙСТВ: 
Р{ 
раддіпд-бор: 0.5ет; 
раддіпс-гіяһс: 10рх; 
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райдіпс-Ьоссот: 3%; 
радаіпа-1еғё:1ет 


При задании отступов можно комбинировать различные единицы измерения. В при- 
веденном примере. помимо всего прочего. размер нижнего отступа булет зависеть от раз- 
меров окна браузера: чем шире окно и, следовательно, больше ширина блока абзаца, тем, 
соответственно, больше размер отступа снизу. При уменьшении размера окна уменьша- 
ется и размер отступа. Можете поэкспериментировать, растягивая и сужая окно 
браузера, — понаблюдайте при этом за изменением размера отступа снизу. 

Задать различные размеры для отступов можно и при помощи стенографического 
свойства радаіпо: 

Р{ 
раддіпа: 0.5еп 10рх 3% 1еп 
} 

Порядок задания значений такой, как для полей и границ: начиная с верхнего отсту- 
па, далее по часовой стрелке правый и нижний, последним задается левый отступ. Таким 
образом, два приведенных выше правила будут эквивалентны по содержанию, но второе 
сушественно короче по записи. 


Отступы или поля? 


В этом разделе мы попробуем разобраться. в каких случаях следует пользоваться от- 
ступами. а в каких — полями. Перечислим несколько принципиальных отличий полей 
и отступов. 

Рассмотрим первое отличие. 


Отступы располагаются внутри границ яц блока, поля — за их пределами. 


Для иллюстрации рассмотрим два класса: 


р пак{ 
Ъаскогоипа-со1ог: #РЕС; 
Ъогаег:1рх 50114 Ыше; 
тагдіп: 1ем 

у 

р_раа{ 
Ъаскагоцпа-сойог: #РЕС; 
Богдег:1рх ѕо1іа Бше; 


Оформим два различных абзаца при помоши этих классов: 
<Р с1азз="р_мак"> Для этого абзаца используется класс "р паг", для него зада- 
ны поля размером 1ет.</Р> 
<Р с1аѕѕ="р_рай"> Для этого абзаца используется класс "р рай", для него зада- 
ны отступы размером 1ет. </Р> 

В результате в окне браузера мы увидим эти абзацы так, как показано на рис. 12.6. 

Как вы видите, в первом случае, когда используются поля, “пустые” места располо- 
жены за пределами границы блока, внутри блока отступов нет. Во втором случае, когда 
используются отступы, “пустоты” расположены внутри границы блока. 

На этом же рисунке хорошо видно и споров Вл ичие между отступами и полями. 


| На отступы распространяется фон блока и Фоовде ттт а на поля нет. По- 
ля всегда прозрачны, сквозь них просвечивает фон родительского элемента. 
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Как видно на рис. 12.6, сквозь прозрачный фон полей просвечивает белый фон ос- 
новной страницы. Фон отступов такой же, как и у всего блока, — светло-желтый (у вас 
картинки в книге черно-белые, соответственно, фон будет светло-серым). 


З поля г отступы в блокам - ежу МАО 


этого абзаца используется класс 'р_ таг", для 
его заданы поля размером ета. 


Для этого абзаца используется класс "р. рай", для 
него заданы отступы размером 1ет. 


[го ГГ Г и о 


Рис. 12.6. Отличие полей тагоіп от отступов 
райаіпо 


Наконец, рассмотрим третье отличие. 


Размеры полей могут иметь отрицательные значения, а размеры отступов только по- | 
ложительные. | 


Рассмотрим такой пример. Пусть мы имсем заголовок первого уровня и следом за ним 
идет текст некоего абзаца: 


<Н1>Заголовок</н1> 
<Р>Абзац текста, на который, с помощью задания отрицательных значений для по- 
лей, попробуем "надвинуть" заголовок.</Р> 


Как такой код будет выглядеть в окне браузера, показано на рис. 12.7. 


Заголовок 


Параграф техста, на который с помощью задания 
отрицательных значений для полей, попробуем 
“надвинуть" заголовок. 


| готово, | | Мойкоипьютер 


Рис. 12.7. Начальный вид заголовка и абзаца 
текста в окне браузера 


Теперь если для заголовка написать стиль с использованием свойства тахоіп и задать ему 
отрицательное значение, то можно “надвинуть” заголовок на текст, сократив расстояние меж- 
дублоками. Используем, например, отрицательное значение свойства тагоіп-робсол: 
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ніц 
пако1п-БоЕЕом: -1еп 
} 


После добавления этой строчки кода вид окна браузера изменится, как показано 
на рис. 12.8. 


Заголовок... помошью заланка 


отрицательных значений для полей. попробуем: 
"вадвинуть" заголовок. 


Рис. 12.8. Задано отрицательное значение для 
поля абзаца 


За счет отрицательного значения нижнего поля (тагсіп-Боссот: -1ел) мы доби- 
лись сокращения расстояния между блоками Н1 и Р на 1 ет, в результате чего и произош- 
ло наслаивание заголовка на текст абзаца. 


Краткое описание всех свойств управления характеристиками блоков в ЅСС приведе- 
но втабл. 12.2. 


Таблица 12.2. Свойства С$$ для управления характеристиками блоков 


Свойство Описание Пример 

тагсіп-сор Четыре индивидуальных свойст- ТР (тагаіп: 10 рх) 

пагдіп-гісће ва, которые устанавливают ве һі үагсіп-Боёсот: -1еп} 
личину верхнего, правого, ниж- 

тагдіп-Бобсот него и левого полей, и стено- 

пакози-леЕе графическое свойство задания 
‘всех полей одновременно (от 1 

пагдіп до 4 значений). Допускается за- 


дание значений в единицах дли- 
ны, процентах от ширины роди- 
тельского блока. Допустимы от- 


рицательные значения 
раддіпс-сор Четыре индивидуальных свойст- ТР (раддіпа: 10 рх} 
райаїпа-гідпе ва, которые устанавливают ве рү.адајро: 0.Ѕеш 1ет) 
личину верхнего, правого, ниж- 
радаіпс-Ьоссот него, левого отступов, и стено- Н1 (радӣіпс-Борсот: 12р} 
равазпа-леёе графическое свойство для 
задания всех отступов одновре- 
райаіпа менно (от 1 до 4 значений). До- 


пускается задание значений в 
единицах длины, процентах от 
ширины родительского блока. 
Отрицательные значения не до- 
пускаются 
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Свойство 


Окончание табл. 12.2 


Ъогдег-сор-міасћ 
Ъогдег-гісће-міасп 
Ъогаег-Бобсот-міаећ 
Богдег-1еѓе-міасћ 
Ъогдег-міаєћ 


Ъогаег-кор-со1ок 
Богдег-к1аВЕ-со1ог 
Богаег-Ьоссот-со1ог 
Ъогӣег-1еѓє-со1ог 
Богӣег-со1ог 


Ъогаег-кор-веу1е 
Бокдек-качвЕ-зку1е 
Богаег-Богкот-5Еу1е 
Богдег-1еёе-5ку1е 
Богаех-зку1е 


Богаег-кор 
Богӣег-гіаће 
Богдег-Бобсот 
Богдег-1еѓе 
Богаег 


Описание Пример 
Четыре индивидуальных свойства, Р {(Богӣег-міасһ: 1рх Зрх } 
которые устанавливают ширину рү 


верхнего, правого, нижнего и лево- 
го сегментов границы блока, 

и стенографическое свойство для 
задания толщины всех сегментов 
границы одновременно (от 1 до. 

4 значений). Допускается задание 
значений в единицах длины и при 
помощи ключевых слов: сһіп, ше- 
Зішт, Ећі ск. Отрицательные зна- 
чения и значения в процентах не 
допускаются 


Четыре индивидуальных свойства, 
которые устанавливают цвет верх- 
него, правого, нижнего и левого 
сегментов границы блока, и стено- 
графическое свойство для задания 
цвета всех сегментов границы од- 
новременно (от 1 до 4 значений). 

В качестве значений используется 
любой из трех способов задания 
цвета 


Четыре индивидуальных свойст- 
ва, которые устанавливают тип 
линий верхнего, правого, нижне- 
го и левого сегментов границы 
блока, и стенографическое 
свойство для задания типа ли- 
ний всех сегментов границы од- 
новременно (от 1 до 4 значений). 
В качестве значений использу- 
ются ключевые слова: 

попе | досбед | даѕћеа | 
ѕо1іа | аоцье | дкооче | 
гібде | іпѕес | оцезее 


Четыре индивидуальных стено- 
графических свойства, которые 
устанавливают стиль верхнего, 
правого, нижнего и левого сегмен- 
тов границы блока в отдельности 
(значения свойств идут в следую- 
щем порядке: Бохдек-изакв, 
Бокдек-5ку1е, Богдег-со1ог),и 
‘общее стенографическое свойст- 
во для определения стиля всех 
‘сегментов границы блока одно- 
временно. В последнем случае все 
сегменты границы будут одинако- 
выми — задание разных стилей 
для разных сегментов границы 
осуществляется через индивиду- 
альные свойства этой группы 


Бохаег-кор-м1аеВ: 1рх; 
Ђогдег-гіће-иіаеһ: шедфит; 
Ъогаек-Босеот-мааЕВ 1рх; 
Ъогаег-1еёс-міаєһ: ёһіп; 

} 


Р (Богдег-со1ог: гей} 


Р.дгееп (богдег-со1ог: ха 
{0,255,0) } 


Н1 (Богаекг-со1ог: #336} 


Р {Юогдег-веу1е: во11а} 


р (Богдег: 1рх ѕоІіа гей) 
Ру 

Богдег-бор: 50114 гей; 
Ъогаег-гісћё: 
Богдег-Ьоссот: 50118 гед; 
Богаег-Іеёс: 


зо1іа гей; 


ѕо1ій геа 
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Списки 


Главное преимущество автоматического создания списков перед ручным состоит в том, 
что не приходится перенумеровывать пункты списка при добавлении в него новых элемен- 
тов. Особенно это важно, когда необходимо добавить некоторый пункт в начало списка, — 
в случае ручного создания придется вручную перенумеровывать большинство его пунктов. 
Это трудоемкий процесс, особенно если пунктов в списке много, отнимающий немало 
времени. При автоматическом создании списков ручной перенумерации не требуется, она 
выполняется в автоматическом режиме при добавлении новых пунктов. 

В НТМЕ есть два вида списков, поддерживающих автоматическую нумерацию: нуме- 
рованные и маркированные. Среди их параметров есть атрибут суре, который позволяет 
задать тип нумерации. В С$$ управление списками предоставляет создателям страниц 
более широкие возможности. 


Свойство ііѕї-ѕїуіе-їуре 


С помощью такого свойства задается вид маркера элемента списка. Значения задают- 
ся при помощи ключевых слов, обозначающих вид маркера, или значения попе, которое 
говорит о том, что маркер не используется. 

Для определения видов маркеров маркированных списков используются ключевые слова: 


• аіѕк — ввиде закрашенного круга; 
е сігс1е — в виде незакрашенного круга; 
• заџаге — в виде закрашенного квадрата. 


Эти значения аналогичны значениям атрибута суре для списков в НТМІ.. Конкрет- 
ное представление маркеров будет зависеть от браузера. 

Для нумерованных списков перечень ключевых слов, задающих тип маркеров в С$$, 
более широк, чем в НТМІ.. Пожалуй, даже слишком широк. Применение большей части 
значений вы вряд ли найдете. Кроме того, не все браузеры их поддерживают в полном 
объеме. Тем не менее, укажем все допустимые значения и браузеры, поддерживающие 
их. Доступны следующие значения для видов маркеров. 


® десіта1 — десятичные числа, начиная с 1. 

• аесіта1-1еадіпд-2его — десятичные числа с ведущими нулями (например, 
01, 02, 03, ..., 98, 99). Это значение не подлерживается браузером Іпіеглеі Ехрюгег, 
в котором нумерация всегда ведется без ведущих нулей. 

» 1омег-готап — римские цифры, представленные строчными буквами латин- 
ского алфавита (! ‚іу, УИТ.Д.). 

• пррег-котап — римские цифры, представленные прописными буквами латин- 
ского алфавита (І, И, Ш, ТУ, Уит.д.). 

• Небгем — традиционная еврейская нумерация. Поддерживается только браузе- 
ром Мо2Ша. Выглядит это так, как показано на рис. 12.9. 

• аеогодіап — традиционная грузинская нумерация. Поддерживается браузерами 
Мода и Орега. Правда, выглядит эта нумерация в них по-разному, я даже не бе- 
русь судить, какой из браузеров делает это правильно. 

• агпепіап — традиционная армянская нумерация. Также поддерживается только 
браузерами Мох Па и Орега. Нумерация выглядит одинаково. 

» сјк-ійеодгарһіс — простые идеографические числа. Поддерживается только 
браузером Мо2Ша. Выглядит эта нумерация так, как показано на рис. 12.10. 
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7 Бе БА Меч бо Бе то Мон Фо 


ЕГЕ Е 7 2 =] ан 
С Фунота | вота 0 ооу оо ы... 


Список, офорыленный с помошью С55 Е 
қ Первый пункт списка 
2 Второй пункт списка 
2 Третий пункт списка 
т Четвертый пункт списка 


Рис. 12.9. Вид списка с традиционной еврей- 
ской нумерацией в окне браузера МогіШа 


[се сва мәгә ТІ 
Бе Би Мен бо вы Тобы Урон р | 
4-2-3 8 Г 5]: 
ноте | феодалов во Еф... 


Список, оформленный с помошью С5$ Е 
— Первый пункт списка 
Второй пункт списка 
Третий пункт списка 
Четвертый пункт списка 


Рис. 12.10. Вид списка с нумерацией идеогра- 
фическими числами в браузере МогіШа 


1омег-1асіп или Іомег-а1рћһа — строчные буквы в коде АЗСП (а, Б, с, ..., 2). 
Оба значения поддерживаются браузерами Мо7Ша и Орега. Іпіегпеї Ехріогег под- 
держивает только значение 1омег-а1рћа. В целях однозначности отображения во 
всех браузерах лучше пользоваться именно им. 

1омег-дгеек — классические строчные буквы греческого алфавита: альфа, бета, 
тамма и т.д. (6, в, г, д,...). Поддерживается браузерами Мода и Орега. 


В случае с нумерацией буквами какого-либо алфавита, после того как буквы в алфавите 


заканч 


иваются, начинается двойная нумерация (аа, аб, ас,...). В табл. 12.3 для сравнения 


приведены способы создания нумерованных списков при помощи С55 и только на НТМІ.. 


Таблица 12.3. Создание нумерованных списков в НТМЕ и С55 


НТМЕ С55 

<ОГ ТУРЕ=“а"> о 

<Г1>Первый пункт списка</11> 1ізе-збуІе-буре: 1омег-дгеек; 
<ЕТ>Второй пункт списка</т> 

<ТЛ>Третий пункт списка</1.1> 

<ГЛ>Четвертый пункт списка</11> <ог> 


</01> 


<ТЛ>Первый пункт списка</Ш1> 
<ТЛ>Второй пункт списка</11> 
<ТЛ>Третий пункт списка</Ш1> 
<ТЛ>Четвертый пункт списка</11> 
</0т> 
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Часть И. С55 


Свойство ііѕї-ѕїуіе-ітаде 

(еј помощью этого свойства можно в качестве маркера списка указать произвольное 
изображение. Таким образом, это свойство предоставляет авторам Меб-страниц совер- 
шенно новые возможности, поскольку теперь варианты создания маркированных спи- 
сков ограничиваются только фантазией создателя страницы. 

Допустим, мы имеем некоторое изображение маркера и хотим, чтобы при создании 
списка оно использовалось в качестве маркера. Тогда следует написать такое правило: 
л. { 

1іѕ-ѕбу1е-ітаде: их] (лагкег.9і#); 

} 

Список, созданный при помощи этого правила, может выглядеть, например, так, как 
показано на рис. 12.11. 


Первый пункт списка 
Второй пункт списка 
Третий пункт списка 
Четвертый пункт списка 


Рис. 12.11. Вид списка с графическим 
‘маркером 


Если в качестве маркера будет использоваться очень большое изображение, то можно 
получить такой эффект, как показано на рис. 12.12. 


Ф 
> 


Рис. 12.12. Вид списка с графическим 
маркером очень большого размера 


Первый пункт списка 


В НТМЕ нет аналога этого свойства, списки с маркерами произвольного вида можно 
создать только с помощью С$$. 


Свойство ііѕї-5їуіе-роѕііоп 


Это свойство позволяет указать положение маркера. Значение свойства задается с по- 
мощью следующих ключевых слов: 


® оцеѕійе — за пределами основного блока элемента списка; 
е іпѕіде — внутри основного блока списка. 


Проиллюстрируем сказанное выше примерами. Рассмотрим С55-правило: 
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ои { 
1ізе-вбу1е-роѕісіоп: оџсѕіде 
} 


В этом случае маркированный список в окне браузера будет выглядеть так, как пока- 
зано на рис. 12.13. . 


сагаа то 


р = а] 
© ка > г = > 6 > 


Е [а 7] лнн - 
ра Възнайа Р шт оаа. 


ЗГ Пеувя пуал санга Бича млрнсра птодаісяза > 
пределами сслевмото Блока элемгата сосна в случае 
1 мамени санае, м блок маркера ившодится внутри 
основисго Блока списка пра змаченик 4 
Второй пуюс свисьа 
Третий пукат спяска 
|. Чесвери 


Рис. 12.13. Список с внешним расположением 
маркеров 


Как видите, если текст элементов списка обвести воображаемым прямоугольником, 


то маркер будет находиться за пределами этого прямоугольника, что и соответствует зна- 
чению оцев14е. 


Если записать правило вида: 
о { 
1ів-вбу1е-роѕісіоп: іпѕіде 


то маркер будет находиться внутри прямоугольной области, ограничивающей список 
(рис. 12.14). 


е М ЛА се ао 
оо за а ле о - 


7 ное сала, Ф за мелко 


1-2 Первый пункт спнех Блок марнери иасадитяза | 
| предельмм оспсвжосо блока элемента списка а случа: | 


значения оме, и блок марттра иазолитя внутри | 
хнозного блева списка при значении вняве 1 
4 Второй пункт спота 1 
+ Третий пункт сц 1 

1 


Рис. 12.14. Список с внутренним располо- 
жением маркеров 


Аналога свойства 1156-5су1е-роѕібіоп в НТМЕ не существует, следовательно, 
управлять положением маркера в этом языке невозможно. 
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Свойство ііѕї-ѕїуіе 


Стенографическое свойство, позволяющее в сокращенной форме задать значения 
свойств 11з3Е-зеу1е-буре, 1і5-збу1е-ішаде и 115Е-зЕу1е-роз1Е1оп. Приведем 
примеры. Правило 
и { 

1ієс-ѕбу1е-буре: сікс1е; 
1іѕс-ѕру1е-іпаде: шг1 (іпадев/пагкег2.91#); 
1іве-ѕбу1е-ровібіоп: іпѕіде 
} 
можно записать в сокращенном виде: 
о { 
115Е-в5у1е: сіс1е шг1 (іпадеѕ/пагкег2.91#) іпѕіде 
} 


Краткое описание всех свойств управления характеристиками списков в $СС приве- 
дено в табл. 12.4. 


Таблица 12.4. Свойства С$$ для управления характеристиками списков. 


Свойство Описание Пример 
13зе-вгу1е-суре Определяет внешний вид маркера ли- Ч (1ізс-зсу1е-суре: 
бо нумератора зачаге; } 
аізс | сіүс1е | ѕаџаге | ОГ (1і5=с-5су1е-суре: 


десіпа1 | десіпа1-1еайіпо-гего | 10ҹег-готап; } 
1омег-гопап | иррег-готап 
1омег-дкеек | 1оҹег-а1рһћа 
1омег-1абіп | иррег-а1рћа 
цррег-Јасіп 


1ізс-всу1е-іпаде Определяет ВЕ для изображения Ш, (115е-всу1е-ітае: 

а шг1(011е03.91#); 
1іво-всу1е- Определяет положение маркеров 11 (1ізс-всуІе-розібіоп: 
ровісіоп внутри или снаружи основного струк- Оче) 

турного блока 


іпзіде | оцевзае 


115Е-в6уле Стенографическое свойство, позво- СЪ {143Е-з6у1е: эсџаге 
ляющее одновременно задать значе- ЧЕ1(Ъ\11еЕ3.91#) оцез4е;} 
ния всех предыдущих свойств. 
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Глава 13 


Практический пример 
применения стилей 


В этой главе . 


> Заголовок 
Первая таблица 
Вторая таблица 


Навигационное меню 


ууу 


Анализ результатов 


Мы уже достаточно много узнали о свойствах С$$ и можем использовать их на прак- 
тике. Пример верстки сайта “Желтый клин”, который был рассмотрен в главе 8, теперь 
можно дополнить С55-правилами, с тем чтобы код стал проще и как можно больше 
‘удовлетворял нашим потребностям. 

Напомню, что при рассмотрении примера верстки сайта мы руководствовались 
принципом: использовать только средства НТМІ.. Средствами С$$ мы не пользовались, 
поэтому не все поставленные задачи нам удалось решить. Полный код полученного при- 
мера привелен в приложении Б. Мы будем брать его по частям и видоизменять таким об- 
разом, чтобы ввести в него использование каскадных таблиц стилей. В результате полу- 
чим аналогичный документ, но уже созданный с использованием НТМІ. и С85. 


Заголовок 


Итак, первый фрагмент кода был следующий: 
<!РОСТУРЕ НТМЬ руБ]4с "-//И3С//0ТЮ НТМЬ 4.0 Тгапвібіопаї 
//ЕМ" "БЕБр: / Лиму .мЗ „ога ТЕ/КЕС-Һек140/100оѕе.дса"> 
<нтмі> 

<НЕАР> 

<«ТТТЬЕ>Желтый клин</ТТТЬЕ> 

<ВАЗЕРОМТ Ғасе="Агіа1"> 
</НЕАР> 

Директиву ртр, естественно, менять не будем, а вот в секцию НЕАР внесем несколько 
изменений. 

Самое первое — удалим элемент ВАЅЕҒОМТ, который задает базовую гарнитуру 
шрифта (как вы помните, элемент ВАЗЕРОМТ работал только в браузере Іпќегпег Ехріогег). 
Вместо него напишем С$$-правило, определяющее базовые параметры шрифта, которые 
‘будут работать уже во всех браузерах. 

Прежде чем писать первые С$$-правила, следует определиться — встроенную или 
внешнюю таблицу стилей будем использовать. Так как мы имеем дело пока с одним до- 
кументом, давайте помещать С$$-правила во встроенной таблице стилей, т.е. между те- 


гами <5ТУБЕ> </5ТУЬЕ> в заголовке НТМ!-документа. Чтобы указать, что таблицы 
стилей будут писаться на языке С$$, следует также задать атрибут суре="Еехе/сзз" 
для элемента ЗТҮГЕ. 

Тогла кол приведенной части документа изменится на такой: 

<!РОСТУРЕ НТМЬ риЬ1іс "-//ИЗС//ртр НТМЬ 4.0 Тгапѕібіопа1//ЕМ" 

"ВЕЕР: / ммм .м3 .ока/ТВ/ВЕС-ВЕт140/1оозе.аь4"> 

<«НТм> 

<НЕАр> 

<ТТТЬЕ>Желтый клин</ТІТІЕ> 

<БТУБЕ буре="бехі/свз"> 

— Здесь будут записываться С68-правила для документа -. 

</5тТУЬЕ> 
</НЕАР> 

Теперь запишем первое С$8-правило, которое заменит элемент ВАЗЕЕОМТ и задаст 

гарнитуру Апа! для всех текстовых блоков. В нашем случае гарнитура относится к свой- 
ствам шрифта, которые являются наслелуемыми. Как уже говорилось ранее, чтобы за- 
дать значение по умолчанию для всех элементов НТМІ.-документа, в качестве селектора 
для такого правила нужно выбрать элемент верхнего уровня в дереве элементов, чтобы 
все остальные унаследовали это свойство от него. Давайте в качестве селектора выберем 
элемент ВОрү и запишем правило, которое нужно поместить межлу тегами <5ТУБЕ> 
</5ТҮІЕ>: 


вору { 
Ғопе-ҒатіЛу: Агіа1, ѕапѕ-зегіё; 
} 


Таким образом, мы определили базовую гарнитуру Агіаї для всех текстовых блоков в 
этом документе. 
Теперь рассмотрим слелующий фрагмент кода страницы: 
<ВОБУ Боббоптагдіп="0" кортака1т=“О“ 1еемага4п="0" гісћетакдіп="0"> 
<МАР папе="соцпегу"> 
<АВЕА зваре=“гесе" ="Английская версия" соогӣѕ="69,5,94,18" Һгеғ="/еп"> 
<АВЕА =ћаре="гесі" "Украинская версия" соогдѕ="38,5,63,17" ҺгеЁ=" /џа"> 
<АВЕА зһаре="гесс" а1Е="Русская версия" соогӣв="6,5,31,18" НхеЁ="/ли"> 
</МАР> 
Этот фрагмент представляет собой открывающий тег ВОБУ и описание карты ссылок, 
которое использустся для изображения флагов государств. С этого изображения с помо- 
щью карты ссылок осуществляется переход на варианты сайта, написанные на других 
языках: украинском и английском. Само описание карты ссылок нам не интересно, по- 
тому что его мы менять не будем, а вот с открывающим тегом <ВОрү> можно поработать. 
В нем мы задаем поля для страницы, точнее говоря, убираем эти поля, присваивая атри- 
бутам нулевые значения. Запись можно существенно сократить, применив свойство 
тауоіп для селектора ВОБУ, т.е. вместо записи атрибутов Боссоттагоіп= "0", сортах- 
сіп="0", 1еЁстасдіп= "0" и гісћстагоіп="0" будем использовать стенографиче- 
ское свойство тагоіп. Тогда правило для вору будет следующим: 
ворү { 
Ғопі-Ғаті1у: Агіа1, вапз-зег1Е; 
тагдіп: Орх; 
Ў 


Аналогичным образом, по ходу работы над НТМІ_-документом, мы будем дописывать 
созданные на предыдущих этапах правила и, по мере необходимости, писать новые. 
В итоге получим полноценный документ с оформленной встроенной таблицей стилей. 
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Первая таблица 


‘Следующий фрагмент кода — это первая созданная нами таблица. Я приведу ее код. 
сокращенно, указав только начальные и конечные теги, так как именно в них скрывается 
описание свойств таблицы в целом. 
<ТАВЬЕ Баскагоипа=“Зптадез/кор Ьс.9іЁ" Басо1ог="#РЕЕЕбЭ" Богаек= 
се115рас1па="0" се11раддіпа="0" міасп= "100%"> 

.. Код строк и столбцов таблицы -. 
</ТАВЬЕ> 


Таким образом, в этом фрагменте кода мы видим, что для таблицы задается следую- 
щее визуальное оформление: 


~ фоновое изображение Баскатоип4="1тадез/кор_Ъа.91#"; 
• цвет фона расо1ог=" #ЕЕҒЕ69"; 
• отсутствие границ Богаег=" 0". 


Так как таблица с такими параметрами на нашей странице всего одна, уместно будет 
ввести для нее селектор по идентификатору. Назовем его, например, ід=" сор". Тогда 
в открывающем теге таблицы следует записать: 
<ТАВЬЕ се11райдіпа="0" се115расіпд="0" 44="Еор" міасһ="100%"> 


Остальные атрибуты можем легко перенести в соответствующее С$8-правило. Оно 
будет таким: 


#сор( 
/* задаем цвет фона */ 
Баскагоипа-со1ог: #ЕРЕЕ6б9; 
/* задаем фоновое изображение* / 
Ђаскагошпа-ітаде: иг1 ("ітадеѕ/сор Ьс.9іё"); 
/* разрешаем повторение только по горизонтали */ 
Ъаскагоипа-1таде: гереас-х; 


Получилось довольно длинно, но если вспомнить о стенографическом свойстве 
Ъаскакоппа, то эту запись можно существенно сократить: 
#сор{ 

Ђаскогоџпа: #ЕЕРРЄ9 иг] ("іпадеѕ/сор 9.91") гереаЄє-х; 
} 

Заметьте, что атрибут Богаег="0" исчез безвозвратно, мы вполне можем это допус- 
тить, так как по умолчанию границы у таблицы и так отсутствуют. 

Для этой таблицы мы, пожалуй, больше ничего сделать не можем. По большому сче- 
ту, выигрыша в коде мы не получили, зато сделали маленький шажок в направлении 
к разделению структуры и визуального оформления документа. 


Вторая таблица 


Рассмотрим следующий фрагмент кода. Далее илет таблица, состоящая из трех столб- 
цов. В первом находится меню сайта, во втором — декоративный фон. и в третьем распо- 
лагается основное содержимое странички. 
<ТАВЬЕ Босо1ог="иваке" Богаег=“0" се11=расіпо="0" се11радаіїпа="0" 
міасћ="100%"> 
<тЕ> 
<Тр Баскагоцпа=" іпадеѕ/Ьд тепи.9іё" а119п="Е1а9НЕ" уа1ісп="Сор" міаеһ="127"> 

= Код меню сайта 
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</то> 
<ТЬ Баскагоцпа="ітадез/Ьд 1іпе.сі" міасћ="20"></тр> 
<тр> 

.. Основное содержимое страницы -. 

</т0> 

</ТВ> 

</ТАВЬЕ> 


Давайте все, относящееся к визуальному оформлению, по возможности перенесем из 
этой конструкции в таблицу стилей. При этом введем еще несколько селекторов по иде! 
тификатору: 


е #таіп — для всей второй таблицы целиком; 
• #тепц — для первого столбца, содержащего меню сайта; 
® #1іпе — для второго столбца, содержащего декоративную линию; 


• #сопсепе — для третьего столбца, который содержит основное содержимое стра- 
ницы. 


Почему мы опять используем идентификаторы, а не классы? По той простой причи- 
не, что таких блоков на нашей странице больше не будет, они уникальны по своему со- 
держанию, поэтому правильнее в этом случае пользоваться именно идентификаторами. 

Имена классам и идентификаторам всегда старайтесь выбирать такие, чтобы по ним 
можно было определить, что в том или ином блоке находится, В нашем примере это пра- 
вило, на мой взгляд, соблюдено. Прочитав идентификатор #тепи, вы сразу догадаетесь, 
что это блок навигационного меню сайта. Итак, код изменится следуюшим образом: 

0" іа="шаіп" міасћ="100%"> 


<ТАВЫЕ се11зрасіпд="0" се11радаіло= 
<ТЕ> 

<ТЮ ій="шепи" міасћ="127"> 

.. Код меню сайта 

</то> 

<Тр 4а="14 пе" міасћ= "20"></тр> 
<ТО ій«"сопёепе"> 

=. Основное содержимое страницы .. 
</то> 

</ТВ> 

</ТАВІЕ> 


Теперь в таблице стилей необходимо записать С55-правила для этих идентификато- 
ров, которые заменят удаленные из НТМІ.-кода атрибуты фона, выравнивания и позво- 
лят задать дополнительные свойства для идентификаторов. 

Начнем с идентификатора #таіл. Для него, как определяющего основную таблицу, 
нужно задать белый цвет фона, и пока все. Лучше всего цвет представить шестнадцате- 
ричным кодом, и так как белый цвет кодируется записью #РЕЕЕЕЕ, то МОЖНО ИСПОЛЬЗО- 
вать сокращенную запись #ЕЕЕ: 


#таїл( 
Баскогошпа: #ЕРЕ; 
} 


С идентификатором #тепи еще проще. Из НТМЕ-кода мы изъяли следующие атри- 
буты: 
Ъаскагоџпд= 


іпадев/Ьд тепи.ді#" а1іс̧п="гідһс" уа149п=“кор" 
Теперь необходимо записать свойства, аналогичные этим атрибутам, чтобы меню 
выглядело так же. 
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#тепи{ 
/*задаем фоновое изображение* / 
Ъаскагоцпа: игі ("ітадез/Ьс_ љепо.9і#") гереае-у; 
/*задаем выравнивание текста по правому краю* / 
сехе-а119п: гісће; 
/*задаем вертикальное выравнивание по верхнему краю* / 
уегсіса1-а1ідп: сор; 


Стиль для идентификатора #11 пе формируется достаточно просто, поскольку нужно 

‘указать лишь свойства. фона. 
#1іле( 

Ђаскагоџпа: ик] ("ітадев/Ьд 1іпе.9іЄ") кереас-у; 
} 

В открывающем теге <Тр> последнего столбца, которому мы присвоили идентификатор 
#сопсепе, не было вообще никаких атрибутов. Но пустое правило лишено смысла, поэто- 
му самое время вспомнить о том, что нам средствами НТМІ. не удалось создать отступы для 
содержимого ячейки этого столбца таблицы. Был вариант с использованием вложенной 
в ячейку таблицы, для которой мы могли бы указать атрибут се11раддіпо= "10", чтобы 
сделать отступы по 10 пикселей с каждой стороны. Однако это только бы излишне услож- 
нило код, Теперь с помощью С$5 желаемые отступы можно сделать очень просто. Восполь- 
зуемся свойством раддіпа: 

#сопсепе ( 

райдіпа:10рх 
) 

Использование атрибута се11радаіпо для вложенной таблицы позволило бы нам 
задать только одинаковые отступы со всех сторон. Свойство раддіпс позволяет задать 
любые значения для каждого из отступов. Для этого в качестве значения свойства надо 
указать четыре значения для верхнего, правого, нижнего и левого отступов соответствен- 
но. Например: 


#сопсепе { 

райдіпо: 10рх 5рх 10рх 15рх 
} 

Абзацы в этом блоке можно оставить как они есть, интерес для нас имеет только заго- 
ловок: 


<Н1 а11от="сепкех">Уважаемый посетитель!</Н1> 


Для заголовка первого уровня при помощи НТМІ. задано выравнивание по центру. 
В зависимости от того, требуется ли менять способ выравнивания для всех заголовков в 
документе или только для первого, могут быть предприняты разные действия. 

Если нужно изменить выравнивание всех заголовков, то можно написать такое С55- 
правило: 
н1{ 

Сехі-а1ісп: сепбег 
е 

Если требуется изменить выравнивание заголовков для всех их шести уровней, то сле- 
дует воспользоваться группировкой селекторов, и правило будет выглядеть так: 
ні, н2, НЗ, на, н5, нб{ 


бехі-аідп: сепеех 
} 
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В том случае, когда только этот заголовок на странице должен быть отцентрирован, 
можно воспользоваться селектором по классу или идентификатору, — все будет зависеть 
от целей. которые вы преследуете. 


Навигационное меню 


Ну и последнее, что мы можем улучшить в этом документе при помощи С$$, — это 
навигационное меню сайта. До сих пор оно было реализовано не лучшим образом: 
<А БкеЕ="#"> 
<РОМТ Ғасе="Агіа1" со1ок="Ы1џе" ѕіге="2"><В>Поселения</В></РОМТ> 
</А>&ПЬБр; <ВЕ> 
<А ВкеЕ="#"> 
<ЕОМТ Ғасе="Агіа1" со1ог="Ь1џе" 512е= 
</А>51Ь5р; <ВВ> 
<А ҺгеЁ="#"> 
<РОМТ Ғасе="Агіа1" со1ог= 
лы</В></ЕОМТ> 
</А>5пЮ5р; <ВК> 
<А ҺгеЁ="#"> 
<РОМТ Ғасе="Агіа1" со1ог="Ь1џе" ѕі2 
</А>ыпЬзр; <ВЕ> 
<А ҺгеЁ=" #"><ЕОМТ Ғасе="Агіа1" со1ог="Ь1че" 512 
</А>5пЬѕр; <ВВ> 
<А ҺкеЁ="#"> 
<ЕОМТ Ғасе="Агіа1" со1ог="Ю1џе" ѕізе="2"><В>00 Украине</В></РОМТ> 
</А>51Ъзр; <ВВ> 
<А ВБгеЁ="#"> 
<РОМТ Ғасе="Агіа1" со1ог="Ь1џе" ѕіге="2"><В>Гостевая</В></РОМТ> 
</А>кпЬзр; <ВВ> 
<А БкеЕ="#"> 
<ЕОМТ Ғасе="Агіа1" со1ог="Ь1џе" ѕіге="2"><В>Меценаты</В></РОМТ> 
</А>5пЬзр; <ВВ> 
<А Һгеѓ="#"> 
<ЕОМТ Ғасе="Агіа1" со1ог="Ы1џе" віле="2"><В>Ссылки</В></ЕОМТ> 
</А>&пЬзр; 


Первое, что пришлось сделать, — это использовать элемент ЕОМТ, чтобы установить 
для текста меню гарнитуру Апа!, синий цвет и размер 2. Кроме этого, в конце каждого 
пункта мы вставляли спецсимвол неразрывного пробела (&пЬѕр;), чтобы появился от- 
ступ справа. Чтобы сделать шрифт жирным, пришлось добавлять еще и элемент В. Таким 
образом, пришлось довольно сложно реализовывать очень простое оформление. Давайте 
попробуем сделать то же самое с помощью С$$. Гарнитура Ана! уже задана для всех тек- 
стовых блоков на странице, для элементов А в том числе. 

Для начала удалим все лишнее из НТМ! -кода, и получим такой фрагмент: 
<ТО ід-"тепи" мідеһ="*127"> 
<А ВгеЕ="#">Поселения</А><ВВ> 
<А Вгеё="#">Организации< /А><ВВ> 
<А Вге#="#">Научные материалы</А><ВВ> 
<А Вгеё="#">Творчество</А><ВВ> 
<А ВгеЁ="#">Новости</А><ВВ> 
<А ВгеЕ="#">06 Украине</А><ВВ> 
<А ҺкеЁ="#">Гостевая</А><ВЕ> 
<А ВкеЕ="#">Меценаты</А><ВЕ> 
<А Вгеё="#">Ссылки</А> 
</тр> 


*><В>Организации</В></РОМТ> 


Б]ие" 51хе="2"><В>Научные&пЬзр; материа- 


"2"><В>Творчество</В></ЕОМТ> 


="2"><В>Новости</В></ЕОМТ> 
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Чтобы написать правило лля ссылок блока #тепи, можно использовать, например, 
селектор по классу. Можно опрелелить специальный класс и записать правило для этого 
класса. Тогда в коле каждой ссылки меню нужно будет указать имя этого класса при по- 
мощи атрибута с1азз. Код фрагмента будет выглядеть так: 

«Тр іа="тепи" міасһ="127"> 

<А с1авв="шепи" һҺгеї="#" >Поселения</А><ВВ> 
<А с1авв="тепи" ҺгеЁ="#">Организации</А><ВЕ> 
<А с1аяв="тепи" ҺгеЁ="#">Научные материалы</А><ВВ> 
<А сЛавв="пепи" #">Творчество</А><ВВ> 
<А с1авв=“шепи" >Новости</А><ВВ> 

<А с1вав="пепи" >06 Украине</А><ВВ> 
<А с1авв="шепи" ҺгеЁ="#">Гостевая</А><ВЕ> 

<А с1ава="тепи" ҺгеЁ="#">Меценаты</А><ВЕ> 

<А с1авв="тепи" Һгеѓ="#">Ссылки</А> 

</тр> 


А соответствующее С58-правило будет иметь такой вид: А .тепи {}. 

Чтобы избавиться от лишней работы по указанию классов ссылок в коде, что, кроме 
того, увеличит и размер кода, уместнее всего в этом случае воспользоваться контекстным 
селектором: #тепи А. Тогда ссылки внутри блока #тепи будут выглядеть так, как опи- 
сано в правиле с селектором #тепи А, все другие ссылки в документе смогут иметь иной 
вид (собственный), отличный от вида ссылок в меню. Дополнительных изменений в 
НТМЕ-коде при этом не потребуется. 

В правиле для селектора #тепи А зададим цвет, параметры шрифта и отступ справа: 
#тепц А( 

/*синий цвет текста*/ 

со1ог: Ыше; 

/*размер шрифта 12 пикселей*/ 

Гопс-віге : 12рх; 

/*полужирное начертание для шрифта*/ 

Еопе-мелаве : Бо1а; 

/*отступ справа 3 пикселя*/ 

радаіпо-гієће:3рх; 


Для записи свойств фона можно использовать стенографическос свойство Еопе, но 
тогда придется подробно указать гарнитуру шрифта, поскольку это обязательное значе- 
ние для свойства ЕопЕ. Правило будет выглядеть следующим образом: 

#тепи А( 

/*синий цвет текста*/ 

со1ок: Ыше; 

/*задание свойств шрифта» / 

ФопЕ: Ъо1& 12рх Агіа1, вапз-зегіё; 

/*отступ справа 3 пикселя*/ 

радділа-гісће:3рх; 


Меню при этом будет выглядеть так же, как и в НТМІ-версии. Однако у него на дан- 
ный момент есть три недостатка. 

1. Текст меню расположен слишком близко к верхней границе ячейки таблицы с 
илентификатором #тепи. 


2. Текст оформляется подчеркиванием, что соответствует режиму по умолчанию для 
ссылок в НТМЕ. 


3. Пункты меню расположены слишком близко друг к другу. Для более удобного 
чтения их можно отодвинуть, увеличив высоту строки. 
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Для того чтобы исправить первый недостаток, придется внести дополнения в правило 
для идентификатора #тепи, добавив свойство рааа1па-Еор. Размер отступа можно за- 
дать в любых единицах длины, например в ет. Тогда размер отступа сверху будет про- 
порционален размеру текста пунктов меню. Теперь код С$5-правила будет следующим: 
#тепи( 

Ђаскогошпа: их! ("Зтадез/Ъч_лепи.д1Е") гереас-у} 

раддіпо-ор: 0.4ет; 

Сехс-а1ісп:гіће; 

уегсіса1-а]ісп: кор; 


Второй и третий недостатки исправляются добавлениями в правило селектора ссылок 
внутри меню. 

Чтобы убрать подчеркивание, для ссылок используем свойство сехе-десогасіоп 
и значение, задаваемое ключевым словом попе. Высоту строки увеличим на 30% при по- 
мощи свойства 1іпе-ћеісће. Получим следующее правило для ссылок меню: 
#тепи А{ 

со1ог: Ыше; 

ЕопЕ: Ьо1а 12рх Агіа1, вапѕ-вегіЄ; 

Ііпе-һеідће : 130%; 


раддіпас-гісће:3рх; 
Сехс-десогасіоп: попе 


Теперь меню выглядит гораздо лучше, чем в НТМІ -версии, и кроме этого, задав раз- 

мер шрифта в 12 пикселей, удалось избежать разбиения пункта меню “Научные материа- 

ы” на две строки. Благодаря С5$, новое меню выглядит максимально близко к тому, что 
было нарисовано дизайнером. 

Но до сих пор мы не задавали внешнего вида активных ссылок, посещенных и ссылок 
в момент наведения на них указателя мыши. В нашем случае активные и посещенные 
ссылки должны выглядеть одинаково, чтобы на любой странице сайта меню выглядело 
одинаково. Для этого можно использовать псевдоклассы :асе1фуе и : уіѕісед, Напом- 
ню, что псевдокласс :1іпк используется для внешнего вида ссылок в обычном состоя- 
нии, а псевдокласс :поуех — для ссылок в момент наведения указателя мыши. 

Чтобы обычные, активные и посещенные ссылки выглядели одинаково, можно вос- 
пользоваться группировкой селекторов: 

Фтепи А:1іпк, #тепи А:асЕ1уе, #тепи А:\151сеа{ 
— описание внешнего вида ссылок. 
} 

Используя псевдокласс : поуег для ссылок во время наведения на них указателя мы- 
щи, можно изменить вид ссылки. Довольно распространенный прием в этом случае за- 
ключается в том, чтобы в момент наведения указателя мыши у ссылки снова появлялось 
подчеркивание. Это можно сделать, записав следующее правило: 

#тепо А:Воуег( 

сехе-ЧесокаЕоп: опдег1іпе 
} 

В этом случае значения всех свойств, кроме свойства сехе-десогабіоп, у ссылок 
А:Һоуег в блоке меню будут такими же. Но в момент наведения на ссылку указателя 
мыши для нее будет меняться значение свойства сехЕ-десогаЕ1оп — с попе на 
опаег1іпе, в результате у этой ссылки появится подчеркивание. 

Теперь у нас осталась последняя таблица, с помощью которой была создана нижняя 
декоративная орнаментная линия. Напомню ее код: 
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<ТАВЬЕ міасһ= "100%" Незаве=“27"> 
<тВ> 
<тр Баскахоипа=" ивадез/Ба_ЪоЕЕот.91Е"></ТО> 
</тв> 

</ТАВЬЕ> 


Для нее пока потребуются лишь несущественные изменения. Определим для нее, так 
же как и для других таблиц, идентификатор # оосег. В свойствах укажем фоновое изо- 
бражение и зададим повторение по горизонтали. Правило будет выглядеть так: 

#Еоосег ( 


Ъаскакоипа:ие1 (*ітасеѕ/Ьа Боссот.9іё") кереаЕ-х; 
} 


Код таблицы изменится на следующий: 
<ТАВІЕ 1й="Ғообег" міасћ= "100%" Һеісћ="27"> 
<тв> 
<то></тр> 
</тв> 
</ТАВЬЕ> 


Анализ результатов 


Теперь подведем итог и посмотрим, какая таблица стилей у нас получилась, а затем 
прокомментируем каждое правило. 


<ЭТУБЕ буре-"Бехе/свз”> 

ВОБУ { /* Задание параметров для страницы в целом */ 
/* Гарнитура Агіа1 для всего текста страницы */ 
Ғопс-Ғаті1у: Аг1а1, ѕапѕ-ѕегій; 
/* Нулевые отступы для страницы */ 
пагдіп: 0рх; 

} 

НІ{ /* Стиль заголовка первого уровня */ 
/* Выравнивание по центру */ 
Сехс-а1ісп: сепкек 

} 

#сопкепЕ { /* Блок основного содержимого страницы */ 
/* Отступы вокруг основного текста страницы */ 
радаіпс:10рх 5рх 10рх 15рх 


} 

#Е006ег ( /* Блок внизу страницы */ 
/* Фоновое изображение, повтор */ 
Ъаскакоипа:ие1 (“ітадеѕ /Ьа Боббот. сі") кереаЕ-х; 


#1:1е { /* Блок с вертикальной декоративной линией */ 
/* Фоновое изображение, повтор */ 
Ъаскадкоипа: иг1 ("ітадеѕ/Ьс_1іпе.91#*) гереас-у; 

} 

#таіп { /* Средний, главный блок */ 
/* Белый цвет фона для основного содержимого страницы */ 
Баскагошпа: #РЕЕ; 

} 

#тепи ( /* Блок меню */ 
/* Фоновое изображение, повтор */ 
Ъаскокоипа: ит] ("1тадез/Ьч_мепи.91Е") гереас-у; 
/* Отступ сверху для меню */ 
раддіпа-бор: 0.4ет; 
/* Выравнивание текста по правому краю блока */ 
Сехс-а1ідп:гідһ; 
/* Вертикальное выравнивание по верхнему краю */ 
уегсіса1-аїіст: сор; 
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} 

/* Ссылки в блоке меню */ 
#тепи А:1іпк, #тепы А:асЁзуе, 
/* Синий цвет текста */ 

со1ог: Ыше; 

/* Параметры шрифта */ 
Ғопе: Бо1@ 12рх Агіа1, ѕапѕ-вегіё; 
/* высота строки */ 

1іпе-Һеі9һће : 130%; 

/* Отступ слева */ 
рааазиа-к19ЪЕ:Зрх; 

/* Оформление текста */ 
Бехс-десогабіоп:попе 


ани А:һоуег { /* Ссылки в момент наведения указателя мыши */ 

/* Оформление текста */ 

Сехс-десогасіоп:ипдег1іпе 
Хер { /* Верхний блок */ 

/* Цвет фона, фоновое изображение, повтор */ 

Ъаскакоцпа: #ЕРЕЕб9 их] ("Зтадез/кор_Ю4.91Ё") гереаб-х; } 
</ЗТУБЕ> 

Естественно, в самом документе комментарии в таблице стилей отсутствуют. Здесь 
они приведены лишь для того, чтобы легче было ориентироваться в таблице, поскольку 
мы еще очень мало работали со стилями. 

При использовании С$5 нам все же удалось добиться некоторого сокращения кода. 
Размер исходного документа был 3342 байт, а документ, переписанный при помощи С$$, 
имеет размер 3244 байт. При этом мы значительно улучшили внешний вид документа, бо- 
лее того, теперь отличия для различных браузеров стали минимальны. По большому счету, 
незначительно отличается только размер абзацных отступов. Хотя нам удалось уменьшить 
код лишь на 98 байт, что относительно немного, следует учесть еще и тот факт, что напи- 
санная нами таблица стилей может быть помещена в отдельный файл и подключаться к са- 
мому документу при помощи элемента отк. Размер файла таблицы стилей 682 байт. Таб- 
лицы стилей во внешних файлах кэшируются браузерами и повторно не загружаются. Так 
как написанная нами таблица стилей может (и должна!) применяться для всех страниц сай- 
та, то помещение ее в отдельный файл поможет более существенно сократить время загруз- 
ки. Правда, это преимущество проявится только при повторной загрузке страницы или при 
загрузке второй и всех последующих страниц сайта, использующих эту же таблицу стилей. 
В этом случае экономия составит около 23%. Согласитесь, это уже довольно существенно. 

При этом улучшилась логичность кода, и теперь он проще воспринимается. Полный 
код полученного документа приведен в приложении Б. 
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Глава 14 
Оптимизация таблиц стилей 
и оформление текста 


В этой главе ... 

> Структуризация таблиц стилей 

> Оптимизация таблиц стилей 

> Практический пример структуризации и оптимизации 


> Оформление текста при помощи С$$ 


Структуризация таблиц стилей 


Не последнюю роль в удобстве чтения кода и уменьшении его объема играют структу- 
ризация и оптимизация таблицы стилей. 

Целям более удобного чтения служит, например, установленная ранее договорен- 
ность писать названия селекторов заглавными буквами, а названия свойств — строчны- 
ми. Вообще говоря, язык С$$ регистронезависимый, т.е. правила 
Р(СОГОВ: гей} 


и 
Р(со1ог:Вер) 


будут равнозначны. Поэтому в первую очередь стоит определиться, в каком регистре вы 
будете набирать названия селекторов, свойств и их значений. И в дальнейшем следует 
строго придерживаться этого правила. Здесь мы продолжим пользоваться тем же прави- 
лом, которое установили в начале. 

Структуризация таблицы стилей ставит своей целью расположение С$$-правил в ней в 
определенном порядке. В таблице стилей, структурированной особым образом, очень легко 
найти нужное правило. Сейчас рассмотрим несколько способов структуризации, а право 
выбрать наиболее подходящий я предоставляю вам. 

Первый способ. Все правила в таблице стилей делятся на три группы в зависимости от 
типа селекторов. В первую попадают селекторы по элементу, во вторую — селекторы по 
классу, а в третью — селекторы по идентификатору. 

Второй способ — по сути, слегка модифицированный первый. Единственное отступ- 
ление — это то, что селекторы по классу для каждого элемента следуют непосредственно 
за селектором по этому элементу. Такой способ более удобен, когда вы не пользуетесь 
универсальным селектором для классов и идентификаторов. Напомню, что универсаль- 
ный селектор в общем случае — это его отсутствие перед именем класса или идентифи- 
катора. Вот несколько примеров: 


• .Е1гзЕБеадег в отличие отН1.#Ғігѕсһеадег; 
~ #тепџ в отличие от Тр#тепи. 


Внутри каждой группы правила также лучше всего структурировать, например, по ал- 
фавиту. Тогда вы точно будете знать, что правило для ссылок с селектором А находится 
в самом начале таблицы стилей, а илентификатор #2его в самом ее конце. 


Оптимизация таблиц стилей 


Цель оптимизации — максимально сократить код таблицы при сохранении результа- 
тивности всех правил. Это довольно сложный процесс, включающий множество состав- 
ляющих успеха. Основными из них можно считать: 


• правильный подбор имен классов и идентификаторов; 
• верстка таблиц без пробелов и переводов строк; 

~ использование стенографических свойств; 

• группировка селекторов с одинаковыми объявлениями. 


Выбор имен 


Решающую роль здесь могут сыграть даже имена классов и идентификаторов. Поэтому 
следует выбирать лаконичные имена, которые должны отражать смысл стиля, а не качест- 
венные его характеристики. В этом случае нужно соблюдать тонкий баланс между кратко- 
стью названия и смыслом стиля. Например, требуется создать особенный стиль для первого 
заголовка на странице, который должен отличаться от всех других, скажем, зеленым цветом 
и растяжкой текста. Тогда, очевидно, требуется создать илентификатор, а назвать его мож- 
но по-разному: "#атееп" "#ссееп Һеадег" "#ігѕс Һеадег" или просто "#Е_в". 

Первые два варианта не вполне хороши, поскольку апеллируют к цвету заголовка 
(в данном случае, к зеленому). Если вы решите сменить этот цвет на синий или любой 
другой, то название совсем не будет ему соответствовать. Третий вариант лучше, по- 
скольку улавливается смысл заголовка, но он достаточно длинный. Последний вариант 
самый короткий, но смысл прослеживается в нем очень слабо. Если вы работаете над ко- 
дом не в одиночку (а так довольно часто и происходит, особенно при реализации круп- 
ных проектов), то вашему коллеге трудно будет самостоятельно догадаться, что значит 
это имя и для чего предназначен данный стиль. В таком случае лучше пожертвовать крат- 
костью в пользу смысла и выбрать третий вариант. Если вы работаете в одиночку и ми- 
нимализация кода — ваша главная задача, то можно взять и четвертый вариант. 


Верстка таблицы стилей 


Как вы уже знаете, С58 не чувствителен к лишним пробелам и переводам строк. По- 
этому правило вида 
Р{со1ог: гед} 


аналогично правилу 


Р{ 
со1ог: гед 
} 


Безусловно, дополнительные пробелы и переводы строк увеличивают размер файла. 
Поэтому, если вам дорог каждый байт, то перед публикацией документа лишние симво- 
лы следует удалить и привести документ к максимально лаконичному виду. В этом случае 
структуризация правил приобретает еще большее значение, поскольку ориентироваться 
втаком коде становится сложнее. Если же оптимизация — не основная ваша задача, то 
можно пользоваться вторым типом записи, особенно это полезно на первых этапах, ко- 
тда ориентироваться в коде таблицы стилей еще тяжело. 
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Значения по умолчанию 


У каждого свойства есть значения по ‘умолчанию, не стоит их указывать явным обра- 
зом. В тексте значения по умолчанию следует использовать только в тех случаях, когда 
надо переопределить ранее заданные значения (вспомните пример с удалением подчер- 
кивания у ссылок, когда указывалось свойство сехі-десогасіоп: ипаег11пе, чтобы 
убрать подчеркивание, использующееся для ссылок по умолчанию). 

Рассмотрим стиль заголовка Н1: 


н { 
бехс-десогагіоп: попе; 
1есбег-ѕрасіпд: помпа] ; 
13ле-ВезавЕ:100% 


Данное правило лишено смысла, так как все указанные в нем значения являются зна- 
чениями по умолчанию, и их смело можно опустить. Код при этом сократится приблизи- 
тельно на 70 байт. 


Использование стенографических свойств 


Для сокращения кода таблицы стилей можно использовать также стенографические 
свойства. Кратко напомним их характеристики 


•  ЕопЕ — сокращенная запись для свойств шрифта, где обязательными значениями 
являются размер и гарнитура шрифта, остальные значения могут быть пропущены 
(табл. 14.1). 

• пагдіп — сокращенная запись для свойств размеров полей. Допустимо задание 
от одного до четырех значений через пробел в следующем порядке: верхнее, пра- 
вое, нижнее и левое (табл. 14.2). 

• рааа1ла — сокращенная запись для свойств размеров отступов. Допустимо зада- 
ние от одного до четырех значений через пробел в следующем порядке: верхнее, 
правое, нижнее и левое (табл. 14.3). 

• Богаег — сокращенная запись для свойств стилей границ (для всех одновремен- 
но) в следующем порялке: толщина, тип и цвет линии (табл. 14.4). 

® Бокаег-гор, Богаег-к1аНЕ, Богаег-БоЕеот, Богаег-1еЁЕ — сокращенная 
запись стилей границ для каждой отдельной составляющей границы в следующем 
порядке: толщина, тип и цветлинии (табл. 14.4). 

е 11вЕ-в6у1е — сокращенная запись стиля маркера списка: тип маркера, его по- 
ложение и изображение, используемое в качестве маркера (табл. 14.5). 


Таблица 14.1. Полная и стенографическая запись свойства РОМТ 


Полная запись Стенографическое свойство 
Ғопс-ѕсу1е : іса1іс; ФопЕ: іса1іс Бо1А зта11-сарз 12р—/150% Агіа1, 
Ғопё-ѕізе : 12р; НеІуебіса, ѕапѕ-ѕегіғ 


Ғопе-Ғапі1у : Агіа1, 
Не1уесіса, ѕапѕ-ѕегіѓ; 
Ғопе-уагіапс : зта11-сарз; 
Еопе-меіоћс 
1іпе-һеідћ: 150% 
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Таблица 14.2. Полная и стенографическая запись свойства МАЯСИМ 
Полная запись Стенографическое свойство 


тагдіп-сор : 0; тагаіп: 0 0.Зет 1рх 2ет 
тагдіп-гідће : 0.Зет; 

тагдіп-Боботп : 1рх; 

таүдіп-1е#с : 2ем; 


Таблица 14.3. Полная и стенографическая запись свойства РАОРІМС 


Полная запись Стенографическое свойство 


раддіпа-сор : раддіпо: 0 Іет 0 2ет 
радаӢіпс-гісһће : 1еш; 
раддіпо-Босбот : 0; 
раддіпд-1еғ : 2еп; 


Таблица 14.4. Полная и стенографическая запись свойства ВОВОЕЯ 


Полная запись Стенографические свойства 
Богдег-міасћ : 2рх Ъог4ег: 2рх досбей Магооп 
Богдег-ѕёу1е : добкеа Богӣег-бор: 2рх доске Магооп 
со1ог: Магооп Богдег-гісће: 2рх досбед Магооп 


Богбег-Бобсот: 2рх доссей Магооп 
Богдег-1еЁЕ: 2рх доссей Магоол 


Таблица 14.5. Полная и стенографическая запись свойства Ч$Т-5ТУЦЕ 


Полная запись Стенографическое свойство 
133Е-веу1е-Еуре: сігс1е; 1і=—-зсу1е: сігс1е шг1 (пагкег.ді) 
1ї15-вбу1е-іладе: ілѕіде 


ит] (пахКег2 .91Е); 
11зЕ-зсу1е-роз1Е1оп: іпѕіде 


Группировка селекторов 


Используемая для сокращения кола таблицы группировка селекторов возможна толь- 
ко в случае полного совпадения блока объявлений стилей. Поэтому будьте внимательны. 

Допустим, у нас есть таблица стилей. описывающая одинаковые параметры шрифта и 
цвета для элементов Р, НЗ и Тр: 


Р{ 
ФопЕ: тейішт Агіа1, Табота, ѕапѕ-ѕегіє; 
со1ог: Ыаск 

} 

нз{ 
Ғопё: тедішт Агіа1, Таһота, ѕапѕ-ѕегій; 
со1ог: Ласк 

тр 


ФопЕ: шефом Агіа1, Таһота, запз-зек1#; 
со1ог: Баск 


Тогда такую таблицу можно сократить, используя грунпировку: 


НЗ, Р, Тр { 
ЕопЕ: педіцт Агіа1, Таһота, ѕапѕ-ѕегіғ; 
со1ог: Ь1аск 
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Если же в стиль заголовка мы решим добавить полужирное начертание шрифта и вы- 
равнивание по центру, то блок объявлений селектора НЗ будет уже отличаться от остальных: 
н3( 

Ғопс: Бо1а педіот Агіа1, Танота, ѕапз-ѕегіё; 
со1ог: Бас! 


Бехё-а1ідп: сепеег 
} 


Из приведенной выше группировки селектор заголовка нЗ придется исключить. Таб- 
лица будет выглядеть следующим образом: 


Р, тр ( 
Ғопе: тедішп Агіа1, Таһота, ѕапѕ-ѕегіё; 
со1ог: Ы1аск 

} 

нз{ 
ФопЕ: бо1а тедіот Агіа1, Таһота, ѕапз-ѕегії; 
со1ог: Б1аск; 
Сех-а1ідп: сепбег 


Если потребуется, например, для ячеек таблицы задать отступы по 5 пикселей с каж- 
дой стороны, то группировку придется разбить окончательно: 
Р{ 

ЕопЕ: тедіштп Агіа1, Таһота, запз-зек1; 

со1ог: Ы1аск 
) 
тр { 

опе: тедішт Агіа1, Таһопа, ѕапз-ѕегіё; 

со1ог: Ьаск; 

раддіпа:10рх 
} 
нз 

Еопе: Бо14 тедіцт Агіа1, Таһота, запз-ѕегіё; 

со1ог: Ыаск; 

Сехс-а1ісп: сепбег 


Практический пример структуризации и 
оптимизации 


Рассмотрим таблицу стилей. 
ВОБУ (ЕопЕ-ЕАМШЫХ: Агіа1, ѕапѕ-ѕегіё; тагдіп-1е#с: Орх; паказп-каане: Орх) 
НІ (бехс-а1ідп: сепбег; бехе-десогабіоп: попе; 1ебрег-зрасіпс: погта1 ) 
Р(СОГОЕ: Ь1џе; бехб-іпдепе: 2еп; } 
Р.дгееп(СОГОВ: дгееп; } 
Р ЕМ { ЕопЕ-зЕУ1е: 16а11с; СОІОК: огапде; 1есбег-ѕрасіпо: 0.2еп;} 
НАФЕЗЕВЕ (СОГОВ:паму; } 
фсоштепе { Баскакоцпа: иг1("ітасез/Ьс.9іЁ") гереас-у; РАООТМС-ТОР: 0.4еп; 
Бехі-а1ісп:гісћо; РАБРТМС-ГЕРТ: 1еп; уегріса1-а1ісп: сор; } 
#соптеп Р{ЕехЕ-1п4епе: попе; ФопЕ-з12е:0.Вет} 
А:1іпк { со1ог: Бе; раддіпс-гісћ:3рх; 11пе-вефчЪЕ : 100%; бехс- 
десогасіоп:попе; раскагоцпӣ: уе11ом; } 
а:асбіуе { СООК: Б1ме; раддіпс-гідЪс:3рх; 1іпе-Һеісћр : 100%; кехе- 
десогабіоп:попе; Баскагошпӣ: уе110ы; } 
а:уіѕісей { СОГОВ: Ыме; райдіпа-гієће:Зрх; 1іпе-һеісћ : 100%; кехе- 
десогасіоп:попе; Басксгоџпа: уе]1ом; } 
А:һоуег (Сехс-десогасіоп:опдег1іпе} 
а.с1аѕѕіс { бехг-десогабіоп: ипдег1іпе; } 
Н2{сехс-а1ісп: сепсег; } 
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Как мы видим, у приведенной таблицы стилей нет единого образца, по которому на- 
писаны правила, поэтому она имеет ряд недостатков. 


+ Правила не разбиты по типу селекторов, а располагаются вперемешку. 


• Между открывающейся фигурной скобкой и первым С$$-свойством в правиле 
имеются лишние пробелы. 


• Названия селекторов написаны то заглавными, то строчными буквами, это же от- 
носится и к названиям свойств. 


ә В некоторых правилах задаются стили по умолчанию, которые можно безболез- 
ненно опустить. 


• Кое-где в правилах запись можно сократить за счет использования стенографиче- 
ских свойств. 


Приступим к исправлению отмеченных недостатков. Сначала удалим лишние пробелы 
между селекторами и открывающейся фигурной скобкой, скобкой и именем свойства, ме- 
жду свойством и его значением и т.д. Названия селекторов перепишем ЗАГЛАВНЫМИ бу- 
квами, а названия свойств строчными. Также можно удалить символы точка с запятой 
в конце последнего свойства в правиле, они там ни к чему. 

После всех преобразований получим такую таблицу стилей. 


ВОрү{ Ёопс-Ғалі1у:Агіа1, ѕапѕ-вегіё; паха1п-1ее:Орх; пагаіп-гісћо:0рх} 
'Н1 {сехе-а119п:сепеех; бехе -десогасіоп:попе; 1ебёег-ѕрасіпо:погпа1) 
рР(со1ог:Ы1џе; бехе-іпдепе:2ет} 

Р.агеепісоІог:дгееп) 

Р ЕМ(Ёопе-ѕсу1е:іба1їс; со1ог:оғапде; 1ебсег-врасіпс:0.2ет) 
Н1#Ғігве(со1ог:паму} 

#соптепе (Баскагоџпа: игі ("іпасеѕ/Ьс.ді#*) гереас-у; райаіпо-кор:0.4ет; кехе- 
а119п1:Е19ЪЕ; раддіпс-Іеѓє:1ет; уегііса1-а1ісп:бор) 

#соттепс Р(Сехс-іпдепе:попе; ЕопЕ-в42е:0.8ет} 

А:11пк(со1ог:Ь1џе; радаіпс-гідћс:3рх; 1іпе-Һеісће :100%; бехё- 
десогасіоп:попе; Баскогоџпа:уе110%) 

А:ассіуе {со1ог:ЫЇше; радаіпа-гідће:Зрх; 1іпе-һеідће:100%; бехе- 
десогасіоп:попе; Баскохоипа:уе11ои} 

А:уівісеа(со1ог:Ь1џе; радаіпо-гідћє:3рх; 1іпе-ћеісћс:100%; кехе- 
десогасіоп:попе; Баскогоџпа:уе110ҹ) 

оуег (Ссехі -десогасіоп:ипаег1іпе) 

А.с1авіс (сех -десогасіоп:шпдег1іпе} 

Н2 (Бехе-а119т:сепеег} 


Тем самым мы сэкономили 61 байт, что составляет 6,8% от исходного размера табли- 
цы стилей. Это не так уж и много, но приятно. 

Теперь разобьем все селекторы на три группы по способу выделения: по элементу, по 
классу и по идентификатору. Иначе говоря, посмотрим, как будет выглядеть таблица, ес- 
ли упорядочить ее по первому правилу структуризации. 

А:1іпк(со1ог:Ьџе; радаіпа-гіће:3рх; Ііпе-ћеісһће :100%; кехе- 
десогабіоп:попе; Баскагоџпа:уе110є) 

А:асбіуе (со1ог:Б1џе; раддіго-гісће:3рх; 1іпе-һеі9һс:100%; сехе- 
десогасіоп:попе; Баскагоцпа:уе11ом) 

А:уізібеб{со1ог:Ь1џе; рабдіпо-гісће:3рх; 1іпе-Һеісће:100%; сех- 
десогасіоп: попе; Баскагоџпа:уе110м} 

А:һохег (бех -десогасіоп:ипдег1іпе)} 

ВОрү(Ғопе-Ғапі1у:Агіа1, ѕапѕ-ѕегі; тагдіп-1еғс:0рх; пагсіп-гісће:Орх} 
НІ (Сехс-а1ісп:сепбег; бехё-десогабіоп:попе; Іебсег-зрасіпо:погпа1) 
Н2 (Ссехё-а1ісп:сепбег} 

Р(со1ог:Ь1ше; кехЕ-1п4епЕ:2ет} 

Р ЕМ(Ғопс-зсу1е:іба1їіс; сойог:огапде; 1ебсег-врасіпо:0.2еп} 
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А.с1авз1с(кехЕ-аесогаеоп:апдек11пе} 
Р.дгееп{со1ог:дгееп} 


нІЖҒігзе(со1ог:пауу} 

#соттепе (Баскагоиоа: ие] ("ітасеѕ/Ьд.91Е*) гереас-у; радаіпс-сор:0.4ет; Бехе- 
аІідп:гісће; радаіпо-1еғс мегсіса1-а1ісп:сор) 

#соптепс Р(Сехс-іпдеп:попе; ЕопЕ-51=е:0.8епт) 


А вот как будет выглядеть та же таблица, если упорядочить ее по второму правилу 
структуризации. 
А:1іпк(со1ог:Ьше; раддіпс-гієће:3рх; 1іпе-һеісћс :100%; кехе- 
десогасіоп:попе; Баскогоопа:уе110м; } 
А:асбіме {со1ог:Ьше; раддіпс-гісће:3рх; 1іпе-Һеідһ:100%; КехЕ- 
десогасіоп:попе; Баскогошз:уе110є; } 
А:уіѕісед{со1ог:Ь1ие; райдіпо-гіоћ:3рх; Ііпе-ћеісће:100%; кехе- 
десогасіоп:попе; Баскагошті:уе110є; } 
А:Ноуех (сехі-десогасіоп:ипдег1іпе) 
А.с1аѕвіс(сехі-десогаріоп:опдег1іпе; } 
ВОрҮ(Ёопе-Ғаті1у:Агіа1, ѕапз-зегі#; тагсіп-1еѓс:0рх; тагдіп-гідһ:0рх)} 
НІ (БехЕ-а11дп:сепЕег; КехЕ-десока1оп:попе; 1екхег-зрас1па:покта1 } 
НІВЕігі {со1ог:паму; } 
Н2 {сехЕ-а119п:сепсег; } 
Р{соІог:Ь1џе; Еехе-зп4епе:2ет; } 
р ЕМ(ЕопЕ-86у1е:16а14с; со1ог:огапде; 1ессег-врасіпа:0.2ет;} 
Р.дгееп(со1ог:9гееп; } 


#соппепе (Баскогоцпа:ик1 ( "1тадев/Ьч.91Е”) гереас-у; раддіпс-ёор:0.4ет; бехё- 
а1ісп:гіс̧һ; раддіпо-1еѓс:1ет; уегріса1-а1ісп:Сор;} 
#соптепе Р(сехе-іпдепс:попе; опЕ-512е:0.8ем} 


Как видите, второй способ структуризации таблицы стилей менее нагляден, потому что, 
читая НТМІ.-код, трудно понять, использовался ли для описания класса универсальный 
селектор или перед именем класса все же было указано название элемента. В коде будут 
просто заданы атрибут с1авє и название класса. Таким образом, первое правило структу- 
ризации предпочтительнее и таблица стилей, структурированная с его помощью, более ло- 
гична, Договоримся в дальнейшем пользоваться именно этим правилом. 

Пронумеруем правила таблицы стилей, чтобы было удобнее на них ссылаться. 

1) А:1іпк(со1ог:Ы1џе; радазпа-кзаве:Зрх; 1іпе-ћеідһе :100%; 

Сехс-десогасіоп:попе; Баскагоцпа:уе11ом}; 

2) А:асЕ1уе (со1ок:Ыше; раддіпо-гідће:3рх; 1іпе-ћеіс̧һе:100%; 

Сехс-десогасіоп:попе; Баскакочпа:уе11ом}; 

3) А:уіѕісед(со1ог:Ы1џе; райдіпо-сіоће:3рх; 1іпе-Һеісһе:100%; 

Бехс-десогасіоп:попе; Баскагошпӣ:уе110м); 

4) А:һоуег(сехс-десогабіоп:ипдег1іпе 

5) ВОрү{ Ғопе-Ғаті1у:Агіа1, ѕапѕ-ѕегі 
пагдіп-гієће:0рх}; 

6) Н1{кехЕ-а119п:сепЕек; бех -десогасіоп:попе; 
1ебсег-ѕрасіпс:погта1}; 

7) Н2{сехе-а1ісп:сепбег}; 

8) Р(со1ог:Ь1це; сехі-іпдепе:2ет}; 

9) Р ЕМ(ЕопЕ-вЕу1е:16а11с; со1ог:огапде; Іесбег-ѕрасіпа:0.2ет); 


тагодіп-1еғє:0рх; 


10) А.с1аѕвіс(бехЕ-десогабіоп:ипдег1іпе}; 
11) Р.дкееп{со1ог:9гееп}; 


12) НІ#ҒЇітБС(со1ог:паму): 

13) #сотпепі (Баскагоцпа: ик] ("зтадез/Ьч.91") кереаЕ-у; 
раддіпо-Сор:0.4ет; бехе-а119т: каче; 
рабдіпд-1еѓс:1еп; уегііса1-а1ісп:сор)}; 

14) #сотпепі Р(бехё-іпдепе:попе; Ёопе-ѕіте:0.Вет} 
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Правила в строках 1-3 совершенно идентичны, следовательно, можно применить 
группировку селекторов для сокращения объема кода. Кроме того, в них применяется 
свойство 1іпе-һеісће :100%, используемое по умолчанию, следовательно, его можно 
вообще убрать. Свойство сехі-йесогасіоп : попе (также значение по умолчанию) уб- 
рать нельзя, поскольку оно переопределяет полчеркнутый стиль лля ссылок. Таким обра- 
зом, строки 1-3 можно переписать короче: 


А:1іпк, А:асбіуе, А:уіѕісей(со1ог:Ь1џе; рада1па-к1ове:Зрх; 
сехі-десогасіоп: попе; Баскакоцпа:уе11ом} 


Строку 4 можно оставить без изменений, сокращать нечего. В ней для ссылок при на- 
ведении курсора мыши вновь включается подчеркивание. 

В строке 5 можно заменить два свойства полей слева и справа на стенографическую 
запись свойства магаз с двумя значениями (одинаковые для полей слева и справа и по- 
лей сверху и снизу): 

ВОрҮ{ Ёопе-Ғаті1у:Агіа1, ѕапѕ-ѕегіє; тагдіп:ацсо Орх} 


Правило в первоначальном варианте задавало нулевые значения только для левого 
и правого полей страницы, а верхнее и нижнее не затрагивало, т.е. они должны оставаться 
заданными по умолчанию, как в таблице стилей самого браузера. Для этого приходится ис- 
пользовать ключевые слова аџбо. Хотя если величины верхнего и нижнего полей не прин- 
ципиальны и их тоже можно установить равными нулю, то правило из строки 5 можно за- 
писать еще короче: 
ВОЮҮ{( Ғоп-Ғаті1у:Агіа1, ѕапз-ѕегіє; пагділ:0рх} 


В строке 6 можно смело избавиться от двух последних свойств сехе-десогасіоп 
и 1ебсег-ѕрасіпа, поскольку для них заданы значения по умолчанию, а вот свойство 
выравнивания требуется сохранить, так как по умолчанию заголовки выравниваются по 
левому краю, а в правиле задается выравнивание по центру. Таким образом, строка 6 со- 
кратится до такого вида; 
Н1 (Еехе-а149п:сепеег} 


Строки 7-8 не требуют изменений. 

Правило в строке 9 можно упростить. В нем используется контекстный селектор для 
элемента ЕМ внутри абзаца текста. По умолчанию такое выделение оформляется курси- 
вом, т.е. свойство Ёопс-ѕсу1е:іёа1іс можно пропустить. Кроме курсива, будет при- 
меняться выделение оранжевым цветом и разреженным шрифтом. Правило будет запи- 
сываться следующим образом: 

Р ЕМ{со1ог:огапуе; Іеббег-зрасіпо:0.2ет) 


Правило С$$ в строке 10 не требует изменений. 

Стиль ссылки класса "с1азз1с" в строке 10, согласно классическому представлению 
о ссылке в МеБ, подчеркнутый. С одной стороны, это значение по умолчанию, и его 
можно было бы опустить, если бы не один момент: ранее в нашей таблице стилей, 
а именно в строках 1-3, которые мы объединили в одну, задается стиль ссылок, где они 
будут без подчеркивания. Таким образом, если мы захотим в тексте НТМІ -документа 
оформить классическую ссылку, то должны будем написать: 
<А ћшеЁ="#" с1авз="с1азвіс">Ссылка с классическим подчеркиванием</А> 


При этом класс "с1аѕѕіс" унаследует синий цвет текста и желтый фон от обычных 
ссылок, только текст будет подчеркиваться. 
Правила в строках 11 и 12 очень просты, поэтому оставляем их без изменения. 


256 Часть И. С55 


Со строкой 13 нужно поработать, и для краткости используем стенографическое 
свойство рада та: 
#соптепе {Баскакоипа: 21 ("ітадеѕ/Ьс.біЕ") кереае-у; раддіпс:0.4ет 0 0 1ет; 
бехі-а1ісп:гідће; мегріса1-а1ісп:бор) 

Строка 14 задаст стиль абзаца внутри блока #сопепе, здесь, очевидно, лишним яв- 
ляется свойство сехі-іпаепі, поскольку в качестве значения используется ключевое 
слово попе (значение по умолчанию). Правило можно сократить: 


#соппепс Р{ЕопЕ-512е:0.8ет} 


Таким образом, выполнив несложные преобразования, получаем таблицу стилей сле- 
дуюшего вида: 


А:1іпк, А:асбіче, А:уіѕібед(со1ог:Ь1џе; рабӣіпа-гісће:Зрх; бехё- 
десогасіоп:ппопе; Баскакоипа:уе11ом} 

ВОрҮ{(Ғопе-Ғаті1у:Агіаї, ѕапв-вегіЁ; пагдіп:0рх} 

Н1 (бехе-а1ісп:сепсег} 

Н2(сехс-а1ісп:сепсег} 

Р ЕМ(со1ог:огапде; 1ебсег-ѕрасіпо:0.2ет) 
А.с1аѕвіс{сехе-десогагіоп: ипдег1іпе} 

Р.дгееп{со1ог:дкееп} 

Н1#ҒігБе(со1ог:пауу} 

#соптпепе (баскогоџпа:џг1 ("Зтадез/Ьч.91Е") гереас-у; раддіпо:0.4ет 0 0 1ет; 
Сехг-а1ісп:гісһе; чегріса1-а1ісп:бор)} 

#соппепе Р(ЕорЕ-$32е:0.8ет} 


Исходная таблица содержала 887 символов, полученная — 442. Это в два раза меньше, 
чем исходный размер. Согласитесь, это уже более существенно, чем оптимизация на 6,8%. 

Налеюсь, приведенный пример показал важность оптимизации и структуризации таб- 
лиц стилей. Выгоды есть и для автора — код таблицы стилей стало легче читать и, при не- 
обхолимости, редактировать. Для пользователя меньший объем файла означает меньшее 
время загрузки страницы. Поверьте, посетители вашего сайта будут вам благодарны, хотя 
и не будут знать, как долго вы занимались написанием и оптимизацией таблиц стилей. 


Оформление текста при помощи С$$ 


Мы уже познакомились с большинством свойств С$$, среди которых было много ис- 
пользуемых для оформления текста. В этом разделе попробуем систематизировать все наши 
знания о тексте, поскольку, несмотря на то что в Мер давно можно публиковать графиче- 
скую информацию, именно текст до сих пор несет основную информацию на \\еб- 
странице. Текст более информативен, чем графика, и кроме того, текстовая информация 
занимает в сотни раз меньше места в памяти компьютера, чем изображения. С$$ предос- 
тавляет нам обширный инструментарий для работы с текстом. 


Выбор гарнитуры шрифта 


Полиграфист, который готовит материал в печать, волен выбрать любую гарнитуру 
для оформления текста, и он уверен, что любой, кто возьмет в руки его печатную продук- 
цию, увидит все, что там написано. Как мы уже имели возможность убедиться, МеБ- 
разработчик такой свободой не обладает. Фрагменты текста, написанные нестандартны- 
ми шрифтами, приходится переводить в графические объекты, чтобы быть уверенным 
втом, что любой пользователь увидит их. Относительно свободно мы можем использо- 
вать только ограниченный набор шрифтов, которые установлены у большинства пользо- 
вателей любой операционной системы. Приведем список таких шрифтов: 
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• Апа[; 

• Апа! Віаск; 

® Соипег №ем; 

® Сотіс Ѕапѕ М$; 

• Таһота; 

• Тітеѕ Мем Котап; 
• Уегіапа. 


Для задания гарнитуры шрифта в С$$ используется свойство Ғопе- Ғаті1у. При 
этом названия шрифтов, состояшие из нескольких слов, рекомендуется заключать в ка- 
вычки, хотя это и не обязательно. 

С целью снять ограничение на использование шрифтов в МЪеЬ практически одновре- 
менно компаниями Мегозой и №еќѕсаре начались разработки технологий, позволяющих 
пользователю скачивать недостающие шрифты. Единого стандарта выработано не было, 
а на тот момент число пользователей браузеров фирм Місгоѕоћ и Ме5саре было практи- 
чески одинаковым. Каждая из предложенных технологий имела свои тонкости, и для 
того чтобы создать универсальный сайт, пришлось бы изучить обе и готовить два разных 
файла для динамического подключения шрифта. Эти неудобства привели к тому, что 
технология динамических шрифтов в широком смысле “не прижилась”. До сих пор су- 
ществуют ограничения на использование шрифтов и приходится переводить некоторые 
надписи в изображения, чтобы обеспечить универсальность отображения. 

Традиционно, когда текст готовится к публикации на бумаге, для его набора обычно 
используются шрифты с засечками типа Тітеѕ Мем Котап. Засечки как бы выравнивают 
строку, и взгляду проще скользить по тексту. Для экранного представления больше под- 
ходят шрифты без засечек, они легче читаются, поскольку засечки, как правило, доволь- 
но мелкие элементы шрифта, и они плохо передаются на мониторах с низким разреше- 
нием. В результате восприятие текста с экрана только ухудшается, тогла как шрифт без 
засечек более прост и при чтении с экрана глаза меньше устают. 


Размер шрифта 


В каких единицах измерения лучше задавать размеры шрифта? Стоит ли пользоваться 
ключевыми словами или задавать значения в конкретных единицах измерения? На эти 
и другие вопросы попробуем сейчас ответить. 

Для удобства чтения текста на странице его размер должен быть достаточным или же 
у пользователя должна быть возможность самостоятельно выбрать подходящий размер. 
шрифта. 

Как вы уже знаете, реальные единицы измерения (сантиметры, миллиметры, дюймы, 
пункты и пики) не очень хорошо подходят для М№еЬ-страниц. Таким образом, для задания 
размеров шрифта у нас остается три возможности: рх, ем и ключевые слова. 

Если дизайн страницы фиксирован, то для задания размеров текста подойдут только. 
пиксели, поскольку только в этом случае возможен жесткий контроль за его величиной, 
При фиксированном дизайне, как правило, жестко задаются размеры блоков меню, заго- 
ловка документа, и даже при незначительных отклонениях размеров весь дизайн может 
просто развалиться. 

Пусть в таблице стилей есть правило: 


ЕТ 
опЕ-в1те: 12рх; 
} 
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В этом случае размер шрифта будет равен 12 пикселей на любом мониторе, но разме- 
ры самого пикселя будут зависеть от размеров и разрешения монитора. При этом пользо- 
ватели браузеров Орега и МозШа смогут увеличить размер шрифта, если он окажется для 
них мал. Орега был одним из первых, реализовавших такую возможность, и до сих пор 
является единственным браузером, который пропорционально увеличивает не только 
текст страницы, но и все остальные элементы, формирующие ее внешний вид, тем са- 
мым гарантируя, что пропорции страницы сохранятся и фиксированный дизайн не раз- 
валится на части. Мо2Ша увеличивает только текст, и, соответственно, фиксированный 
дизайн все равно может разрушиться, если пользователь даже незначительно увеличит 
размер шрифта. 

Браузер Іпіегпеї ЕхрІогег не позволяет увеличить размер шрифта, если он задан в фик- 
сированных единицах. Таким образом, есть вероятность, что если пользователь, зайдя на 
вашу страницу, не найдет возможности увеличить слишком мелкий для него размер 
шрифта, он просто уйдет искать ту же информацию в другом месте. Если же материалы 
вашего сайта сильно заинтересуют пользователя, то он может попробовать предпринять 
те или иные меры самостоятельно. Например, можно скопировать содержимое страницы 
в текстовый редактор и там увеличить либо размер шрифта, либо масштаб отображения 
документа, чтобы стало комфортнее читать текст. Согласитесь, не каждый возьмет на се- 
бя такой труд, скорее он просто развернется и уйдет на другой сайт. 

В таких случаях слишком большой размер текста — менее существенный недостаток, 
чем слишком мелкий. Можно также ориентироваться на средние показатели размеров 
мониторов и разрешений. Но показатели эти день ото дня меняются и, скорее, в пользу 
‘увеличения размеров мониторов и, соответственно, используемых разрешений экрана. 

С одной стороны, при разработке фиксированного дизайна следует ориентироваться 
на минимальное разрешение 800х600, чтобы даже на самых маленьких мониторах стра- 
ница просматривалась без дополнительной горизонтальной полосы прокрутки. Не будем 
забывать, что большинство пользователей сети пока предпочитают браузер Іліегпе! Ех- 
ріогег. А в отношении размера текста можно утверждать, что он должен нормально чи- 
таться и на больших разрешениях, хотя бы для разрешений 1024х768 и 12801024. 

В относительно скором времени все большее количество нареканий по поводу безо- 
пасности браузера Іпіегпе! Ехрюгег и призывы переходить на более безопасные альтерна- 
тивные браузеры могут изменить расстановку сил среди браузеров. Тем не менее, главен- 
ствующие позиции за Ілќегпеі Ехріогег все же сохранятся еше достаточно долго. 

При “резиновом” дизайне точное соблюдение величин не требуется, поскольку такой 
дизайн создается из расчета, что он будет автоматически адаптироваться к различным 
мониторам и разрешениям. Главное, чтобы сохранялись пропорции при оформлении 
текста, заголовков и других текстовых блоков. 

В этом случае для задания размеров шрифта незаменима единица ет. Поскольку она 
вычисляется относительно базового размера, с ес помощью легко можно сохранить же- 
лаемые пропорции в тексте. Чаще всего посетители просматривают Меб-страницы с от- 
ключенным масштабированием текста в окне браузера. В браузерах Орега и МогШа при 
этом размер шрифта устанавливается равным 100%, а в браузере Іпќегпе‹ Ехріогег он бу- 
дет “средний”. 

Рассмотрим такую таблицу стилей: 


Р{ 
Ғопс-ѕіге:1ет 
} 


втс{ 
ЕопЕ-312е:1.5ем 
} 
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ЗМАБЕ 
ЕопЕ-542е:0.7ет 
} 


<Р>Пример фрагмента текста, пропорционально <5МАШ.>уменьшенного</5МАШ:> или 
<ВІС>увеличенного</ВІС>, благодаря единице измерения ет независимо от размера 
шрифта, установленного в браузере</Р> 


При установленном в браузере Іпісгпеї Ехріогег среднем размере текста, этот фраг- 
мент кода булет выглядеть так, как показано на рис. 14.1. 


оформлен текстар С55 Мктозой Іо стт ЕЛЕЕ РГ. 


Пример фрагмента текста, пропорционального умит 
или УВЕЛИЧЕННОГО, благодаря единице измерения 
ет, независимо от размера шрифта, установленного в 


Рис. 14.1. Вид документа в браузере Ітетег Ехріоғег 
при среднем размере шрифта 


Однако даже если установить в браузере самый крупный размер шрифта, пропорции в 
тексте по-прежнему сохраняются (рис. 14.2). 


ЕБ 


Пример фрагмента текста. 
пропорционального уменьшенного 


пшувеличенного. 


благодаря единице измерения ет. 
независимо от размера шрифта, 
установленного в браузере 

НС 20 


Е 


Рис. 14.2. Вид того же документа в браузере (тете! 
Ехріоғег при самом крупном размере шрифта 


Еще один доступный вариант задания размера шрифта в С$5 — использование ключе- 
вых слов: хх-зта11, х-ѕта11, эта11, тедішт, 1агде, х-1агае, хх-1агде. Как уже го- 
ворилось ранее, для получения каждого следующего размера используется множитель 1,2. 
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Ключевых слов всего семь, столько же и размеров было в НТМЕ, только обозначались они 
цифрами от 1 до 7. 

Однако использование ключевых слов для задания размера шрифта сопряжено с не- 
которыми трудностями. Как вы уже знаете, в С$$ эта шкала симметрична и в качестве 
значения по умолчанию используется значение ше@3 ли, тогда как в НТМ!. эта шкала не- 
симметрична и значением по умолчанию является значение ѕі 2е= "3". Из-за такого не- 
соответствия получаем разные размеры шрифта в браузерах Имегле! Ехріогег, Орега 
и Мога (рис. 14.3). 


ена ы е 

тла кла на 

та этай та 

швеи шебана Рая 

аре ее т 

х-агое х-агое х-Јаве 
хх-агое 
хх-агое хх-агое 

Имегоей ЕхрЮгег 6.0 Орега 7.51 Мона 17 


Рис. 14.3. Размер шрифта, установленный при помощи ключе- 
вых слов, в разных браузерах отличается 


Как вилно из этого рисунка, в браузере Моа размер ме@1 ит равен размеру ѕта11 
в браузерах Іпіегпе! Ехріогег и Орега, который они используют по умолчанию. Таким об: 
разом, можно слелать вывод, что происходит сдвиг значений из-за несовпаления значе- 
ний по умолчанию в шкалах размера в С$5 и НТМІ. 

Разночтения и неодинаковое отображение в различных браузерах размеров шрифта, 
заданных при помощи ключевых слов, вызывают некоторые трудности в их использова- 
нии. Но все-таки их можно преодолеть, написав для разных браузеров отдельные табли- 
цы стилей и подключая нужную с помощью средств Јауа$сгірі. Тогда в этих таблицах 
стилей размеры шрифта должны будут отличаться на один пункт. Так, в таблице для ш- 
тегпег Ехріогег и Орега будет написано правило: 

Р{ 

ЕопЕ-812е: вта11 
} 

А для браузера Мога следует написать так: 


Р{ 
ЕОПЕ-512е: тедішт 


Оформление текста 


Текст на НТМІ -странице должен не только “вписываться” в основной лизайн, но 
еше и удобно читаться. Кроме правильного выбора гарнитуры и размера, немалую роль 
играют и другие параметры текста. Все они пришли в Ме из полиграфии и нашли здесь 
достойное применение. У нас не так уж много средств, позволяющих оформить текст 
и расставить в нем акценты: начертание, межлустрочные интервалы, расстояние между 
буквами, выравнивание. отступы — вот, собственно, и все. Попробуем разобраться, в ка- 
ких случаях следует применять эти параметры для оформления текста. 
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Предположим, необходимо оформить некоторый довольно большой фрагмент текста. 
Допустим, это некая книга или статья. Сразу хочется отметить — все, что можно приме- 
нять для заголовков, чаще всего неприменимо для оформления основного текста статьи. 

В тексте самой статьи при необходимости можно выделить ключевые фразы. Для 
этого уместнее всего использовать жирное начертание (полужирное, чаще его называют 
‘именно так) или курсив. При этом надо учитывать, что полужирное начертание визуаль- 
но выделяет фрагмент в тексте. Читатель, как правило, обращает на него внимание еще 
до того, как дочитает текст до места выделения. Поэтому полужирное начертание больше 
подходит для оформления заголовков и подзаголовков. Даже без увеличения размера за- 
головка его полужирный шрифт визуально выделяет его из основной массы текста. 

Если же требуется вылелить некоторые фрагменты, но при этом не нарушать визуаль- 
ную равномерность строки, то лучше пользоваться курсивом. На него читатель обратит 
внимание, только приблизившись вплотную к фрагменту. 

На новостных лентах часто используется такой прием: первый абзац текста выделяет- 
ся курсивом, а последующие имеют обычное начертание. В тексте, полностью набран- 
ном курсивом, фрагмент текста можно выделить обычным начертанием. 

Давайте попробуем реализовать это при помощи С$$. Запишем таблицу стилей для 
оформления статьи. В ней будет немного правил. Одно правило будет задавать стиль за- 
головка статьи; размер заголовка будет в 1.4 раза больше основного текста. Второй стиль, 
задающий гарнитуру Апа! для шрифта, будет для текста абзаца. Для первого абзаца при- 
дется определить отдельный класс " #ігѕср", меняющий начертание с обычного на кур- 
сивное. И последнее правило будет менять начертание внутри элемента ЕМ для первого 
‘абзаца с курсивного на обычное. Итак, получим таблицу стилей: 


нз{ 
ЕопЕ: 1.4еп Агіа1, ѕапз-ѕегії; 
} 


Р{ 
Ғоп-Ёаті1у: Агіа1, ѕапз-ѕегії; 
} 
Р.Еігѕєр( 
Ғопе-ѕбу1е:іба1іс; 
} 


Р.Е1кзЕр ЕМ { 
Ғопс-всу1е:погта1; 


} 


А теперь наберем текст самой статьи: 


<НЗ>Загоповок статьи</нз> 

<Р с1азз=“Е1гзер">Первый абзац <ЕМ>полностью</ЕМ> набирается курсивом, чтобы 
выделить основную мысль текста и обратить на себя дополнительное внима- 
ние.</р> 

<Р>Основной текст новостной статьи. Оформляется обычным начертанием. Выделе- 
ние внутри создается <ЕМ>курсивом</ЕМ>, чтобы не поменять оптическую насыщен- 
ность строки и раньше времени не привлечь к себе внимание.</Р> 

<Р>Еще один абзац статьи, в нем выделение будет создано при помощи 
<5ТЕОМС>полужирного</ЅТКОМС> начертания, оно будет сразу бросаться в гла- 
за!</Р> 


В браузере такая статья будет выглядеть так, как показано на рис. 14.4. 
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ия =. 


Т ње бодтой зим иановивы 
Заголовок статьи 


Первый параграф полностью набирается курсивом, чтобы 
выделить основную мысль текста и обратить на себя 
дополнительное внимание. 


Основной текст новостной статьи Оформпяется обычным 
начертанием Выделение внутри создается курсивом, чтобы не 
поменять оптическую насыщенность строки и раньше времени не 
привлечь к себе внимание. 


Еще один параграф статьи, в нем выделение будет создано при 
помощи полужирного начертания, оно будет сразу бросаться в 
глаза! 


52 Готе 


Рис. 14.4. Внешний вид статьи, оформленной без особых изысков 


При этом внешний вид текста можно еще улучшить. Давайте рассмотрим несколько 
примеров. 

В первую очерель, хочется изменить выравнивание абзацев. Сейчас для них установ- 
лено выравнивание по левому краю, что является значением по умолчанию. Для такого 
рода статьи больше подойдет выравнивание по ширине, тогда текст будет смотреться ак- 
куратнее и колонка текста будет ровнее. Делается это заланием свойства сехс-а1істп: 
јиѕсі у, при этом незначительно увеличатся расстояния между словами в строке, чтобы 
выровнять общую длину строк. 

Р{ 

ЕопЕ-Еапы1у: Агіа1, ѕапз-ѕегі; 

бехі-а1ідп: јџабіёу; 


Не всегда хорошо смотрится наличие абзацных отступов между абзацами. В НТМІ. 
мы не имеем возможности регулировать размер таких отступов или удалять их совсем. 
При помощи С$$ это можно сделать довольно легко. Вспомним, что абзац — это блок, 
иу него есть поля (тагодіп), которым можно придать даже отрицательные значения. Та- 
ким образом, если в С$8-правило мы допишем свойство, отвечающее за размеры полей, 
то сможем регулировать абзацные отступы. Давайте удалим отступы, для этого восполь- 
зуемся краткой записью свойства птагсіп: 0. Теперь правило примет вид: 

Р( 

Ғопі-Ёаті1у: Агіа1, ѕапз-ѕегіё; 

Бехе-а1ісп: јиѕсі ғу; 

тагдіп: 0; 


После этого абзацы будут следовать друг за другом, без отступов, с выравниванием по 
ширине (рис. 14.5). 
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ЕЕ 


Бе БЕ уен Ракка: о Нер 
ПЕСИ ТРИ е: 
дата 


Заголовок статьи 


Первый параграф полностью набирается 
курсивом, чтобы выделить основную мысль 
текста и обратить на себя дополнительное 
внимание, 

Основной текст новостной статьи. Оформляется. 
обычным начертанием Выделение внутри 
создается курсивом, чтобы не поменять 
оптическую насыщенность строки и раньше 
времени не привлечь к себе внимание 

Еще один параграф статьи, в нем выдепение 
будет создано при помощи полужирного 
начертания, оно будет сразу бросаться в глаза! 


Рис. 14.5. Выравнивание текста по ширине и уст- 
ранение абзацных отступов 


Аналогичным образом можно уменьшить отступ после заголовка, чтобы он ближе 
примкнул к основному тексту. Для заголовка достаточно отрегулировать только нижнее 
поле элемента НЗ, дописав в правило свойство маха1п-БоЕЕот: 0 .2еп: 
нз{ 

Ғопі: 1.4ет Агіа1, ѕапв-ѕегіғ; 

тагдіп-Ьобёот:0.2еш; 

} 

При этом, чтобы первый абзац все-таки больше выделялся в тексте, после него нало 
оставить небольшой абзацный отступ, который исчез вместе с остальными отступами. 
Для первого абзаца дополним правило свойством тмагосіп-Ьобсот: 0 . Ѕет следующим 
образом: 

Р.Ғігѕор( 

Еопе-ѕбу1е:іса1іс; 

шагдіп-Ьобёот:0.5еп 


Полученный в итоге результат в окне браузера Іпіегпет ЕхрІогег показан на рис. 14.6. 

Как видите, второй и третий абзацы сливаются, и снова хочется их разделить. При 
этом абзацные отступы нас не устраивают, но есть еще одна возможность — создать от- 
ступ первой строки, так называемую “красную строку”. При этом желательно, чтобы 
красная строка отсутствовала у первого абзаца. Для этого дополним правило, используя 
свойство сехЕ-1п4епЕ: 
Р( 

Ғопс-Ғаті1у: Агіа1, ѕар=-ѕегіё; 

Сехб-а1ідп: јиѕріғу; 

бехі-іпдепё: 2е; 

тарчіп: 0; 
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[Вст сроожстсссть ТЕТ 


Бе БЖ үен гы вв Нер. г 
1-0 | 


Заголовок статьи 


Первый параграф попностью набирается 
курсивом, чтобы выдепить основную мысль 
текста и обратить на себя допопнительное 
внимание 


Основной текст новостной статьи Оформпяется. 

обычным начертанием Выделение внутри 

создается курсивом, чтобы не поменять = 
оптическую насыщенность строки и раньше 

времени не привпечь к себе внимание. 

Еще один параграф статьи, в нем выделение 

будет создано при помощи полужирного 

начертания, оно будет сразу бросаться в глаза! 


он 


Рис. 14.6. Специальное оформление первого абзаца 


В результате красная строка появится и у первого абзаца — согласно принципам на- 
следования, но мы легко сможем это исправить в правиле для первого абзаца: 


Р.Ғігвсрќ 
Ғопе-ѕіу1е:іба1іс; 
пагдіп-Босбот:0.5ет; 
Сехі-іпдепе:0; 


Теперь наша статья будет выглядеть так, как показано на рис. 14.7. 


а ја 
ТИТА 5:8: * 
татам 18% 


Заголовок статьи 


Первый параграф попностью набирается 
курсивом, чтобы выделить основную 
мысль текста и обратить на себя 
дополнительное внимание 


Основной текст новостной статьи 
Оформляется обычным начертанием 
Выделение внутри создается курсивом. 
чтобы не поменять оптическую 
насыщенность строки и раньше времени не 
привлечь к себе внимание. 

Еще один параграф статьи, в нем 
выделение будет создано при помощи 
полужирного начертания, оно будет сразу 
бросаться в глаза! 


а р. 377797 ЗАНАР 


Рис. 14.7. В абзацы добавлены красные строки 
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Для усложнения задачи предположим, что в статье встречается очень важный абзац, 
который, по мнению ее автора, содержит ключевую информацию. Например, это может 
быть важное замечание или полезный совет. Существует несколько способов выделить 
такой абзац в тексте. 

Способ первый — изменить плотность текста. Менять при этом расстояние между 
словами или буквами не рекомендуется — для текста это не лучший способ выделения, 
эффективнее просто изменить начертание на курсив или полужирный. 

Изменение расстояния между буквами может пригодиться при оформлении таблицы 
с данными, которая по ширине не помещается на экране. Тогда, чтобы избежать появле- 
ния горизонтальной полосы прокрутки, можно уменьшить расстояние между буквами 
внутри таблицы, и она станет более компактной, и, возможно, горизонтальной полосы 
прокрутки не потребуется. 

Приведем пример. Пусть у нас есть некая таблица с данными (рис. 14.8). 


ФИО сотрудника Оклад Выдано под авансовый отчет Начислено зарплаты Улержано тп зарплаты) 


(Иванов Петр |5 000р | 1000р | 4850р. | 530р 
"Сидоров Алексей 8 000р.' | 8000р | Э05р | 
{Петров Сергей |7 00р. 2500р. _1_6000р = = 


Рис. 14.8. Таблица с нормальным расстоянием между буквами в словах 


НТМІ.-код такой таблицы будет следующий: 


<ТАВЬЕ се11зрасіпс="0" се11раддіпа="2" Богдег= 
<ТЕ> 
<ТН>ФИО сотрудника</ТН> 
<ТН>Оклад</ТН> 
<ТН>Выдано под авансовый отчет</ТН> 
<ТН>Начислено зарплаты</ТН> 
<ТН>Удержано из зарплаты</ТН> 
</тВ> 
<ТВ а1419п="сепкек"> 
<ТО а1190="1еЕЕ">Иванов Петр</ТО> 
<10>5 000 р.</Тр> 
<тр>1 000 р.</тр> 
<Т0>4 850 р.</тр> 
<ТО>530 р.</тр> 
</ТВ> 
<ТВ а1ідп="сепсег"> 
<ТР аіідп="1еєс*>Сидоров Алексей</Тр> 
<тр>8 000 р.</тр> 
<тр>впЬвр; </тТр> 
<ТО>8 000 р.</тр> 
<т0>905 р.</Тр> 
</тЕ> 
<ТВ а1ісп=*сепбег"> 
<ТО а1ісдп="1еЁс">Петров Сергей</Тр> 
<Т0>7 000 р.</тр> 
<тр>2 500 р.</Тр> 
<Тр>6 000 р.</Тр> 
<т0>700 р.</т0> 
</ТЕ> 
</ТАВЬЕ> 
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По ширине в окне браузера Іпіегпег Ехріогег такая таблица занимает примерно 740 пиксе- 
лей при среднем размере шрифта. Это уже слишком много, если ориентироваться на мини- 
мальное разрешение экрана 800х600 пикселей. С помощью С$5-свойства Ієессег-ѕрасіпо 
эту таблицу можно немного сжать, а также можно убрать отступы внутри яческ, установив ну- 
левое значение атрибута се11рада1 па. 

Давайте создадим новый С$$-класс ТАВІЕ.паггом для новой узкой таблицы, при 
этом начальный тег таблицы должен стать таким: 
<ТАВЬЕ се115рас1пд="0" се11рада1пд="0" Бок4е: 


С$$-правило для класса ТАВЬЕ . паггом будет очень простым: 


ТАВІЕ.паггом { 
1ебсег-ѕрасіпд: -0.05ет; 
И 


В результате таблицу удалось сократить по ширине приблизительно на 100 пикселей, 
и новая таблица выглядит уже вполне приемлемо. Оцените полученный результат визу- 
ально (рис. 14.9). 


УПО сотрудника Оклад Выдано под явинкавьй отчет Начик лено зяралать Удерљано ко зралаты 


Иванов Пер — 500р| 1000р | 4850р | 530р | 

[Сидоров Алексей 8 000р| _ | #000р ] 5р | 

‘Перов Сергей 7000р! 2500р [6000р | 70р 

ФНО сотрудника Оклад (Выдано под авансові отчет Нячислено зарплаты ГУдержано ню зарплаты! 
Иванов Петр В 000 Р) 1000р Е | 4850р ] 530р | 
[Сидоров Алексей 18 000р | 53 | 8002 | 5р 

[Петров Сергей. 17000 р! 2500р | 6000р | 700р. 


Рис. 14.9. Для уменьшения ширины таблицы сокращено расстояние между буквами 
в словах 


Еще один способ состоит в разбиении текста заголовков на две строки простым до- 
бавлением элемента ВЕ в код таблицы. В этом случае разбиение можно выполнить до- 
вольно просто, поскольку в остальных строках хранятся только цифры, не занимающие 
по ширине много места. Этот прием можно применить, даже не меняя расстояния между 
буквами. Результат показан на рис. 14.10. 


(ФИО ‹отрудникаОклал Выдано тад лалековый отчет Нлчик лено зарпляты Удержлно ш зарплаты. 


Г апо То | Выдано под Начислено У; 
| еее акагсанй сту] заран 
Иванов Петр 50р! Г г000р | 4850р | 
(Сидоров Алексей 8 000 р 

ана ат 7000 


Рис. 14.10. Для уменьшения ширины таблицы использован перенос строк в 
заголовках 
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Но в других случаях вам сможет помочь только уменьшение расстояния между буква- 
ми — например, когда столбцов в таблице много и текст их заголовков состоит только из 
одного слова, которое невозможно разбить на две строки. Дополнительно можно умень- 
шить размер шрифта для текста таблицы. Только оформляйте такие таблицы как отдель- 
ный класс, чтобы не затронуть текста остальных таблиц. 

Увеличение или сокращение высоты строки в большом объеме текста также не позво- 
лит ярко выделить текст из общей массы. В общем случае оптимальной считается высота 
строки, равная 120% от размера символов. Иначе говоря, если шрифт имеет размер. 
12 пунктов, то высота строки в этом случае будет равна 14,4 пункта. При слишком ма- 
ленькой высоте, строчки очень близко располагаются друг к другу, что затрудняет чте- 
ние. Слишком большая высота снижает скорость чтения из-за непривычно больших рас- 
стояний между строками, и взгляду приходится “проходить” большее расстояние, чтобы 
перейти на новую строку. Оптимальной высотой строки является диапазон от 110% до 
140%, и, безусловно, этот показатель зависит от гарнитуры шрифта. 

Приведем пример трех классов абзацев, .р1, .р2 и .рЗ, для каждого из которых зада- 
дим соответствующий стиль. 

Р.р1( 
1іпе-Һеі9һе:100% 
В о 

1іпе-ћеіћы:120% 
еу 

1іпе-һеісће:150% 

} 


В браузере три оформленных этими стилями абзаца будут выглядеть так, как показано. 
на рис. 14.11. 


[5 стая обостле тсосто агба ЕВ В 


Пе Ск беч © Бане в рое в 
Е ЗЕЕ ЕЙ 


= 
Текст этого параграфа будет уплотнен = 


строки 100% размера шрифта очки при этом 
распопагаются непривычно близко друг к другу 


Для этого параграфа использовалась стандартная 
высота строки - 120%. Такой текст читать удобнее, 
чем в предыдущем параграфе 


Третий параграф имеет высоту строки равную 150% 
Расстояние между строчками существенно 
увеличено Такой прием можно применять для 
разрежения текста не странице, если это требуется 


2] 


в. 


Рис. 14.11. Разная высота строк в тексте 


В общем случае менять высоту строки не рекомендуется. Но в тех случаях, когда нуж- 
но увеличить плотность текста на странице, все же можно уменьшить высоту строки, но 
не стоит ее делать меньше 100%. Например, вы хотите сделать длинный список компакт- 
нее. Уменьшать высоту строки можно для списков, оглавлений или карт сайта, в которых 
главным фактором является не удобство чтения, а быстрый поиск нужного пункта. И ес- 
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ли эти пункты будут ближе расположены друг к другу, то нужный пункт можно найти бы- 
стрее, реже пользуясь полосой прокрутки. 

С увеличением высоты строки ситуация следующая. Любой МеБ-дизайнер всегда 
стремится расположить на одной странице как можно больше информации. Олно из 
правил создания Меб-страниц заключается в том, чтобы на начальной странице разме- 
щалась вся важная, ключевая информация: навигационное меню сайта, главные новости 
и тому подобная информация. Таким образом, когда пользователь впервые попадает на 
сайт, он должен, не пользуясь полосой прокрутки, на первой же странице увидеть доста- 
точно информации, чтобы определить для себя полезность или бесполезность этого ре- 
сурса. А наша задача — сделать свой ресурс непременно полезным, нужным и удобным. 
Увеличение высоты строки напрямую скажется на том, какое количество текста будет 
размещаться на первой странице. 

Если же речь идет о важном примечании или совете, то изменения плотности текста 
явно недостаточно, поскольку такой фрагмент должен сильнее выделяться из общей мас- 
сы, бросаться в глаза. В этом случае мы можем воспользоваться тем, что абзац — это 
структурный блок, поэтому его, как любой блок, можно выделить при помощи полей, от- 
ступов, рамки и фона. Это можно сделать, написав вот такой стиль для некоторого выде- 
ленного абзаца: 

Р.ве1ессеа( 

Ъаскакоипа: #РЕЕЕСС; 

Богдег: 1рх ѕо1ід #660000; 

пагдіп: 0.5ет 0; 

раддіпд: 0.5ет; 

» 


<Р сТаѕв="ве1ессей">Попробуем выделить этот абзац в основной массе текста. 
Применим для этого несколько способов, тогда в конкретной ситуации вы сможете 
выбрать подходящий для вас. </Р> 


Заголовок статьи 


Первый пераграф полностью набирается курсивом, чтобы 
выделить основную мысль текста и обратить на себя 
дополнительное внимание. 


"Основной текст новостной статьи Оформляется обычным 
начертанием. Выделение внутри создается курсивом, чтобы не 
поменять оптическую насыщенность строки и раньше времени 
не привлечь к себе внимание. 


Попробуем выделить этот абзац в основной массе 
текста Применим для этого несколько способов, тогда в 
‘конкретной ситуации вы сможете выбрать подходящий для 
вас 


і 
Еще один параграф статьи, в нем выделение будет 
создано при помощи полужирного начертания, оно будет 
сразу бросаться в глаза! 


Рис. 14.12. Выделение текста с помощью рамки и заливки 
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Этот способ, пожалуй, самый радикальный. Такое выделение не часто встретишь 
в обычной книге, но на М№еБ-странице мы имеем более широкие возможности выделения. 
Я уж не говорю о традиционных выделениях начертанием и цветом. Ведь мы можем эле- 
ментарно изменить цвет текста нужного абзаца, и тогда он тоже будет выделен в общей 
массе. Способов много, а какой из них применить — зависит от конкретного случая 
и вашего вкуса. Главная рекомендация — для конкретного сайта выберите один способ 
выделения и придерживайтесь его, чтобы ваш сайт не “пестрил” разнообразием, а выгля- 
дел строго и стильно. Главное — не просто знать все возможности С$$, а уметь приме- 
нять их правильно и именно там, где это уместно. 
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Глава 15 


Использование блоков 


В этой главе ... 
> Блоковая модель 


Модель визуального форматирования 


У 


Подключение таблиц стилей при помощи Јаха$сгірі 


У 


Управление видимостью и переполнением блоков 


У 


Блоки и таблицы 


Блоковая модель 


Знание блоковой модели С$$ позволяет нам верстать сайты без использования 
НТМІ -таблиц. 

В языке НТМЕ можно создавать различные блоки: заголовки, абзацы, таблицы и пр. 
Мы уже знаем, что каждый элемент НТМІ отображается в виде структурного или строч- 
ного блока. Однако в НТМЕ нет возможности позиционировать (точно размещать) соз- 
данные блоки на странице. Все они располагаются друг за другом в той последовательно- 
сти, в которой указаны в коде страницы. Пожалуй, единственным исключением являют- 
ся рисунки, для которых в элементе ІМС можно указать выравнивание по правому или 
левому краю, например: 
<1МС экс: ісёџге.9іє" а119п="г19ве"> 


В этом случае изображение как бы “вырывается” из обычного потока элементов 
и выравнивается по правому краю страницы, а текст и другие элементы обтекают его слева. 

В С$5 имеется обширный инструментарий, позволяющий не только создавать блоки 
на основе любых элементов НТМІ., но и точно позиционировать их на экране. При этом 
таблицами пользоваться не нужно, код страницы становится более логичным, понятным 
и легко читаемым. Естественно, что и размер кода при использовании С5$ в большинст- 
ве случаев становится меньше. 

Таким образом, формирование страницы при помощи средств С5$ сводится к сле- 
дующему: 

® создается блок и задаются его параметры: 

• вновь созданный блок размещается (позиционируется) на странице. 

В предыдущих разделах мы уже рассматривали структуру блока в С$$ (рис. 15.1). 
Итак, каждый блок имеет контентную часть, в которой располагается содержимое блока: 
текст, рисунки, таблицы, т.е. любые требуемые элементы. Естественно, внутри блока 


могут располагаться и другие блоки, тогла они называются вложенными в первый, а сам 
этот первый блок будет являться контейнером для вложенных в него блоков. 


. Ширина блока „ 
(ма) 


Содержимое блока 


Отступы (рааіпа) 


Поля (тагоіп) 


Граница (Богдег) 
Рис. 15.1. Параметры блока в С55. 


| Контейнер есть у любого блока — им является элемент блокового уровня, непосред- | 
| ственный предок данного элемента в дереве элементов документа. Для некоторых 
| элементов контейнером служит непосредственно окно браузера. 


Контентная часть блока может быть окружена отступами, рамками и полями. Для них 
могут быть установлены некоторые значения или они могут быть нулевыми. Блок имеет 
некоторую фиксированную ширину (из ЕВ) и высоту (пеісће). Общая ширина контей- 
нера блока складывастся из собственно ширины блока, ширины левых и правых полей, 
толщины левой и правой границ, а также левого и правого отступов. 

Все параметры полей, границ и отступов можно задать при помощи соответствующих 
свойств. Подробно мы их уже рассматривали ранее. Ширина контентной части блока за- 
дается при помощи свойства міаєћ, высота — при помощи свойства Һеісће. Как вы 
помните, поля, границы и отступы по умолчанию имеют нулевое значение, поэтому из- 
начально ширина блока совпадает с шириной контейнера. 

Если для некоторого блока не заданы явным образом ширина и высота, то они будут 
равны ширине контейнера этого блока. Так, если внутрь элемента ВОБУ поместить лю- 
бые другие элементы, например абзац, то ширина этого блока будет равна ширине кон- 
тейнера ВОРУ, т.е. ширине самого окна браузера. 

Приведем пример. 


<вору> 
<Р>Убедимся, что ширина данного блока будет совпадать с шириной окна браузе- 
ра.</Р> 

</вору> М 


В браузере этот код будет отображаться так, как показано на рис. 15.2. 
Можно принудительно ограничить ширину блока, например, записав С$$-правило 
следующего вида: 


РЕ 
міаєһ: 50%; 
} 
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болот 


Убедимся, что ширина данного 
блока будет совпадать с шириной 
окна браузера 


Рис. 15.2. В этом примере контейне- 
ром для блока служит окно браузера 


Теперь этот блок будет занимать по ширине только половину окна браузера, посколь- 
ку ширина блока здесь явно указана равной 50%, а проценты в данном случае вычисля- 
ются относительно ширины контейнера (рис. 15.3). 


Теперь этот блок будет 
занимать по ширине только 
половину окна браузера, 
поскольку ширина блока 
указана явно и равна 50%. 


бое 


Рис. 15.3. Ширина блока задана как 50% от шири- 
ны контейнера 


Положение вложенного блока всегда определяется относительно области контента 
контейнера, не затрагивая отступы, границы и поля блока. Рассмотрим пример блока, 
который будет служить контейнером для некоторого другого, и зададим для него сле- 
дующие параметры: 


#таіп Б1оск( 
со1ог:гед; 
Баскагоипа: #РЕРЕСС; 


Богдег: 1рх зо11а #660033; 
тагдіп: 2ет; 
радӣіпд: Лет; 


міасћ: 200рх 
} 


«РТУ Ір="паіп р1оск"> 
Содержимое главного блока #таіп Ъ1оск 
</оту> 

Текст внутри этого блока красный, отступы внутри блока равны 1 ет, сам блок имеет 
светло-желтый фон и обрамлен темно-коричневой сплошной границей толщиной 
в 1 пиксель. Ширина блока 200 пикселей, поля для блока (т.е. отступы от краев контей- 
нера — а в нашем случае контейнером служит окно браузера) равны 2 ет. В браузере этот 
код мы увидим так, как показано на рис. 15.4, при этом реально отступы и поля будут 
иметь такой размер, как показано на рис. 15.5. 
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Содержимое главного 
блока #тат Моск 


Рис. 15.4. Вид блока с границами, отступами и фо- 
ном в окне браузера тете! Ехрогег 6.0 


коноовя модель, "стото трей арфы >. 


ве са 


Е 
а 


эдержнмоє гларног 
рака тааш Ыосіс 


Контент блока 


Рис. 15.5. Размеры отступов и полей блока 


Теперь внутрь этого блока поместим другой, для которого написано следующее пра- 
вило: 


Р{ 
міасћ:50%; 
Ъогдег:1рх Чоскеа #336699 


<0ІУ Ір='таіп_ Ь1оск"> 
Содержимое главного блока #таіп Б1оск 
<Р>Параграф шириной 50% своего контейнера</Р> 


</рту> 

Как видите, для вложенного абзаца не задано ни полей, ни отступов, только отобра- 
жение границ синей пунктирной линией толщиной 1 пиксель, — чтобы можно было уви- 
деть, где этот блок будет располагаться. В результате картина в окне браузера изменится 


так, как показано на рис. 15.6. 
На рис. 15.7 приведены необходимые пояснения по поводу размещения вложенного 


блока в его контейнере. Как видите, наш блок Р размешается на расстоянии абзацного 
отступа от прочего содержимого главного блока и не имеет смещения относительного ле- 
вого края. Ширина вложенного блока теперь равна 100 пикселям (50% от 
200 пикселей) — так используемое значение вычисляется относительно контейнера, ко- 
торым для него теперь является не все окно браузера, а блок #таіп_ Ь1оск. 


274 Часть И. С55 


В блоковая модель М те Борат 
Бе БЕ уну аи в С 
[о-о аа же 21- 


Содержимое главного 
блока фта Босс 
Параграф \ 
шириной 

50% своего: 
Уонтейнера; 


ЕхрІоғег 6.0 


[Содержимое главного 
[лока #ньи_Боск. 


Рис. 15.7. Вложенный блок находится внутри области 
контента главного блока 


Давайте немного видоизменим правило для блока Р, добавив поле слева, как показано 
ниже. 
Р( 

мідсп:50%; 

Ъогдег:1рх доссед #336699; 

пакоіп-1е#0:10рх 


Теперь контентная часть блока Р сдвинется вправо, а его ширина станет равна 45 пик- 
селям (50% от 100 – 10 = 90), как показано на рис. 15.8. 
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Содержимое главног 
блока ёта Ыогк 


осе О Буст 


Рис. 15.8. Отступ слева для вложенного блока отсчиты- 
вается относительно области контента главного блока 


Язык НТМІ не позволяет задать ширину и высоту блоков — блок всегда по ширине 
совпадает с размером контейнера. Например, мы не сможем при помощи НТМЕ. ограни- 
чить ширину абзаца, как только что сделали при помощи С$$-свойства уіасћ. Единст- 
венный способ ограничить абзац — это поместить его внутрь ячейки таблицы, поскольку 
для таблицы в НТМІ. можно указать ширину. Для сравнения в табл. 15.1 приведен спо- 
соб задания ширины блока при помощи С$$ и только на НТМЕ. 


Таблица 15.1. Задание ширины в НТМЬ и С55 
С55 НТМЕ 


в { <ТАВЬЕ се11райдіпо="0" се115расіпд=*0" Богаег= 
1 аЕН:50%; міасћ= "50%" 
} <тв> 


<Р>Параграф шириной 50% <Р>Параграф шириной 50% от окна браузера.</Р> 
от окна браузера.</в> </тр> 
</Тв> 
</ТАВЬЕ> 


Согласитесь, что с помощью С$$ задать размер блока проще. В НТМІ приходится 
пользоваться искусственным приемом, привлекая для этой цели таблицы. 


Различия в блоковых моделях 


(Существуют браузеры, которые корректно поддерживают блоковую модель, описан- 
ную еще в стандарте С$$ 1. Согласно спецификации, общая ширина блока в корректно 
работающей блоковой модели определяется следующим образом. 


Г бещая ширина блока ЕЕ Тее) + (Богдег- Тек) + (рааа1па-1еЕе)+ 
| (зав) + (радаіпа-гісће) + (ьогаег-гісће) + (пага1п-кзаВЕ) 


Рассмотрим пример блока: 
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#51оск { 
Богаег:10рх ѕо1іа #660; 
рабаіпо: 50рх; 
тагдіп: 15рх; 
міась:400рх 


Согласно спецификации С5$, ширина контекстной области данного блока должна 
быть равна 400 пикселей. Поля, границы и отступы вычисляются дополнительно к ши- 
рине контекстной части. Таким образом, общая ширина области, занимаемой этим бло- 
ком, должна равняться 400 + 250 + 2х10 = 520 пикселей. Именно так этот блок отобразят 
браузеры, корректно реализующие блоковую модель, — к таким можно отнести Орега 5+, 
Меѓѕсаре 6.х, Мо2Ша 0.9.х. 


400 рх 


[Ширина области контента должна быть равна 400 


пикселей. 


Корректная блоковая модель СУХ 


П 400 рх ў 


орх 
Ширина области контента должна быть 


Равна 400 пикселей 


Блоковая модель Нисгисй Ехррюгсг 5 
Рис. 15.9. Различия в реализации блоковой модели С55 


В браузере Ицегпе! Ехрогег 5 блоковая модель реализована с ошибкой. В нем общая 
ширина блока считается заданной свойством міаеєћ, поэтому значения ширины полей, 
отступов и границы входят в нее, что, по сути, неверно. Из-за этого уменьшается ширина 
контентной части блока. На рис. 15.9 приведены оба варианта работы блоковой модели. 
Там отчетливо видно, что в Іпќегпе! Ехріогег 5 ширина контентной части уменьшается 
следующим образом: 400 – 2х10 – 2х50 = 280 пикселей. Как видите, несоответствие до- 
вольно значительное. 

Только в том случае когда у блока нет ни отступов, ни полей, ни границ, он во всех 
браузерах будет выглядеть одинаково. Но, к сожалению, не всегда можно обойтись таки- 
ми простыми блоками, поэтому нужно учитывать различия в блоковых моделях и устра- 
нять их последствия, — ведь браузером Ижегпег Ехріогег 5 на настояший момент пользу- 
ется довольно значительный процент пользователей Интернет. 

Следует также отметить, что в браузере Іпіегпе! Ехріогег 6.0 (в режиме совместимости 
со стандартами) блоковая модель исправлена и работает корректно. Установить браузер 
Іпегпеї Ехріогег 6.0 в режим совместимости со стандартами можно, указав полный фор- 
мат директивы РоСтҮРрЕ. Подробнее об этом читайте ниже в этой же главе, в разделе 
“Еще раз о важности директивы ООСТҮРЕ”. 
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Устранение различий 


На первый взгляд может показаться, что устранить различия довольно просто: нужно 
сделать так, чтобы для Іпіегпеї Ехр!огег 5 было установлено одно значение ширины (400 + 
2х10 + 250 = 520), а для всех остальных браузеров, работающих корректно, другое зна- 
чение — 400. Сделать это можно двумя способами. 

Первый способ — написать разные таблицы стилей для разных браузеров и подклю- 
чать нужную в зависимости от того, какой браузер используется. Сделать это можно, на- 
пример, при помощи средств языка ЈауаЅсгірі. Подробнее о том, как это сделать, будет 
рассказано чуть ниже, в этой же главе. Второй способ — разместить оба объявления 
в одной таблице стилей и сделать так, чтобы кажлый браузер воспринимал только нужное 
ему объявление. 

Первый способ универсальный, и с его помощью можно устранить любые несоответ- 
ствия в работе различных браузеров. Единственный случай, когда он не сможет помочь, 
это при отключении поддержки языка Јауа$Ѕсгірі в настройках браузера — пользователи 
иногда так поступают из соображений безопасности. Но чаще всего ЈауаЅсгірі поддержи- 
вается, и в этом случае вы можете воспользоваться любым из уже написанных ранее сце- 
нариев, которых существует великое множество. Или, если вы знакомы с ЈауаЅсгірі, мо- 
жете написать подходящий сценарий самостоятельно. 

Второй способ далеко не универсален — он основывается на том, что некоторые брау- 
зеры некорректно обрабатывают неизвестные им конструкции, что позволяет таким об- 
разом “скрыть” ненужные для этого браузера объявления. 

Как вы уже знаете, для определения элемента, к которому будет применен стиль, ис- 
пользуются селекторы. До сих пор мы знакомились с селекторами, описанными в спе- 
цификации С$$ 1, однако многие селекторы из спецификации С$$ 2 также поддержива- 
ются браузерами. 

Рассмотрим, например, селектор, определяющий непосредственного (прямого) по- 
томка для некоего элемента НТМИ. (листинг 15.1). 


| Листинг 15.1. Пример иерархии элементов, потомков элемента <ВОрү> 


<вору> 
<Н1>Заголовок — прямой потомок ВОБУ</Н1> 

<0ту Ір="ЪЛоск"> 

<Н1>Заголовок — непрямой потомок ВОБУ, прямой потомок ЮІу</Н1> 

Содержимое блока 

</рт\у> 
</вору> 

Если поставить перед собой задачу сделать все заголовки, являющиеся прямыми по- 
томками элемента ВОрү, зелеными, не меняя при этом цвет остальных заголовков, мож- 
но создать для них отдельный класс, но тогда придется прописывать название этого клас- 
са в каждом таком заголовке, что не очень продуктивно. Гораздо проще такую задачу ре- 
шить с помощью селектора следующего вида: 
ворү>ні { 

со1ог: дгееп; 

} 

Тогда в примере, представленном в листинге 15.1, первый заголовок, являющийся 
непосредственным потомком элемента ВОБУ, будет зеленым, а второй останется преж- 
него цвета, так как прямым потомком этого элемента не является. 

Браузер Имегпе! Ехріогег 5.х не понимает этого селектора, поэтому будет его просто 
игнорировать. А браузеры Орега 5 и Мозга его понимают и будут применять записанные 
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правила. Теперь наши проблемы с устранением различий в блоковой модели браузеров 
можно попробовать решить так: 
#1оск { 
Ъогдег:10рх во1іа #660; 
радаіп 
міаећ: 520рх 


} 

ВОрУ>#Р1осКк { 
міаєћ: 400рх 

} 


При использовании такой конструкции все браузеры установят ширину блока, рав- 
ную 520 пикселей, в том числе и Имегпег Ехріогег 5, а затем те браузеры, которые пони- 
мают селектор непосредственного потомка и имеют корректную блоковую модель, уста- 
новят для ширины блока значение 400 пикселей. 

Все бы хорошо, но браузер Іліегпеѓ ЕхрІогег 6 также не понимает селектора непосред- 
ственного потомка, но при этом блоковая модель работает в нем правильно. Тогда в нем 
сначала ширина блока будет установлена равной 520 пикселей, а так как второй селектор 
он не поймет и пропустит, то правильное для него значение в 300 пикселей не будет уста- 
новлено. Такая ситуация недопустима, и надо искать другие пути. 

Кроме селекторов из С55 2, которые неодинаково поддерживаются браузерами, есть 
свойства, которые не относятся к визуальным браузерам. И если визуальный браузер 
встречает такое свойство, то должен его просто пропустить и продолжить обработку 
этого правила. Однако браузером Ицегпе! Ехріогег 5 такие конструкции также некоррект- 
но обрабатываются, на этом и основан другой метод. Придумал его один из разработчи- 
ков стандарта С$$ 3 Тантек Целик (Тапіек СейК). 

Решение будет таким: 

#Б1оск { 

Богдег:10рх ѕо1ід #660; 

райдіпд: 50рх; 

міаєћ: 520рх; 

уоісе-Ғаті1у: "\"}\""; 

уоісе-Ғапі1у: іпһегіб; 

міаєһ: 400рх 
} 


НТМІ>ВОрҮ #51оск { 
міаеһ: 400рх 
} 


Давайте разбираться, как это работает. Описание стилей построено таким образом, 
что в начале идет задание ширины міаєњ: 520рх, которое предназначено для браузера 
Іпегпеѓ Ехрогег 5. Он установит такую ширину, и блок будет отображаться в нем пра- 
вильно. Затем браузер Іпіегпеї Ехріогег 5 наткнется на конструкцию 
уоїсе-Ғатілу: "\")\""; 

Это свойство относится к звуковым таблицам стилей, и Іліегпеі Ехріогег 5 некоррект- 
но его обработает, в результате чего придет к заключению, что на этом месте С$$-правило 
для НЬ1оскК заканчивается. Все остальные браузеры корректно обработают эту конструк- 
цию, т.е. просто пропустят и переопределят ширину блока последней записью свойства: 
міась:400рх. Іпќегпеі Ехріогег5 не понимает селектора непосредственного потомка 
(НТМЕ>ВОРУ #1оск), поэтому значение ширины для него останется равным 520 пикселей. 

Но не только у Иметег ЕхрІогег 5 проблемы с обработкой свойства уоісе- Ғаті1у, 
они также могут возникнуть и у браузера Орега 5 и выше. Зато Орега прекрасно понимает 
селектор непосредственного потомка и переопределит ширину блока с его помощью. 
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Браузер МогШа правильно пропускает свойство уоісе-Ғаті1у, а также понимает 
селектор непосредственного потомка. Таким образом, в нем будет установлена нужная 
ширина блока — 300 пикселей. 

Остается еще браузер Іпіегпеі ЕхрІогег 6, который корректно обрабатывает свойство 
уоісе- Ғапі1у, т.е. пропускает его, но не понимает селектора непосредственного по- 
томка. В общем, проблем и с ним не будет, если в браузере корректно работает блоковая 
модель. Если модель корректна, то установленная последним объявлением в первом пра- 
виле ширина в 300 пикселей обеспечит нам нужную картину. Как уже упоминалось ра- 
нее, режим работы браузера Іпќегпе! ЕхрІогег 6 зависит от формата директивы РОСТУРЕ. 

Пора рассмотреть вопрос установки модели работы этого браузера подробнее. 


Еще раз о важности директивы ООСТУРЕ 


При изучении НТМЕ мы говорили о том, что спецификация НТМІ 4.0 требует, что- 
бы для М№еЬ-страницы было задано определение типа документа ртр. Для этого в первую 
строку описания типа документа включается декларация ! ООСТҮРЕ соответствующего 
формата. Если вы не задаете ОТР в своем документе, то имейте в виду, что совместимые с 
НТМІ..4.0 браузеры по умолчанию используют строгое определение ртр. 

Формат директивы при этом следующий: 
<!БОСТУРЕ НТМЬ РОВС "-//МЗС//ЮТЮ НТМІ, 4.01//ЕМ" 

"ВЕЕр: / /ммм .м3 .ога/ТВИВЕ1 4 /з6 есь. Еа"> 

Кроме определения собственно типа документа, формат этой директивы определяет 
режим работы браузера. Если в директиве указывается полный КІ. страницы с описа- 
нием отр, это дает сигнал браузерам, что страницу нужно вывести с соблюдением опре- 
деленного стандарта или подвида этого стандарта. 

Если воспользоваться неполным тегом РОСТУРЕ (например, без указания ОВГ. — ус- 
таревшим его видом), браузер перейдет в так называемый режим обратной совместимо- 
сти и будет работать, как его предыдущие версии, не поддерживая, соответственно, но- 
вейшие стандарты. В результате может возникнуть неприятная ситуация. Представьте, 
что вы создавали У\еб-страницу, используя новейшие средства и С$$-правила, а также 
типы селекторов, которые должны поддерживать современные браузеры. А на практике 
при просмотре страницы окажется, что она отображается так, как будто вы ее просмат- 
риваете в браузере Имегпе: Ехрюгег4.0, который очень слабо поддерживает С$$. При 
этом надо отметить, что подобным недостаткам не подвержен браузер Орега, который 
всегда старается отобразить документ так, как будто он написан в соответствии со всеми 
стандартами. 

В то же время полный формат директивы БОСТУРЕ устанавливает браузер в режим со- 
вместимости со стандартами, и он отображает документ максимально правильно в соот- 
ветствии с реализованными в нем стандартами. Например, в режиме совместимости со 
стандартами, если указан строгий тип ОТР, не будут восприниматься элементы и атрибу- 
ты НТМІ., помеченные в спецификации как нежелательные для использования. Так как, 
в основном, они отвечают за оформление, то вместо них нужно пользоваться С$$- 
правилами для соответствующих элементов. 

Еще раз приведем формат директив ртр с указанием КІ. в полной форме для НТМІ. 
4.01 — в трех видах: для строгого, свободного и фреймового варианта соответственно. 


<100СТҮРЕ НТМЬ РОВЫТС "-//ИЗС//Юто нтмі 4.01//ЕМ" 
«ВЕБ: / Ими (м3 .оха/ТВ/ћҺет14/всгісс.аса"> 


<!РОСТУРЕ НТМ, РОВІІС "-//МЗС//РТЮ НТМЬ 4.01 Тгапѕібіопа1/ /ЕМ"' 
"НЕЕр: / Ими. м3 . ога/ТВ/НЕт14/1оозе.аЕа»"> 
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<100СТҮРЕ НТМЬ РОВЦІС "-//ИЗС//ЮТЬ НТМГ. 4.01 Егатеѕес/ /ЕМ" 
"Беер: / Лол. м3 -ога/ТВ/ВЕгТ4 /Егапезее .аа"> 


В табл. 15.2 приведены режимы работы браузера Іпіегпеї ЕхрІогег 6.0 в зависимости от 


формата директивы РОСТУРЕ документа. 


Таблица 15.2. Режимы работы браузера И\егпе! Ехріогег 6.0 в зависимости 
от формата директивы ООСТҮРЕ документа 


Значение !РОСТҮРЕ ОР задан ОВІ не задан 
Не установлен Обратной совместимости Обратной совместимости 
НТМІ (если версия не указана) Обратной совместимости Обратной совместимости 


НТМЕ 2.0 Обратной совместимости Обратной совместимости 
нтмі 3.0 Обратной совместимости Обратной совместимости 
нтмі 4.0 Стандартный Обратной совместимости 
НТМЕ 4.0 Егатезе! Стандартный Обратной совместимости 
НТМЕ 4.0 Тгапзйюпа! Стандартный Обратной совместимости 
НТМІ. 4.0 Ѕігісі Стандартный Стандартный 

ХНТМЕ Стандартный Стандартный 


Ширина и высота блоков 


В НТМІ. при размещении в ячейке таблицы некоторого содержимого, которое по 
ширине превышает ширину ячейки, ячейка автоматически растягивается до нужного 
размера, чтобы полностью вместить содержимое. 

Как же ведут себя в такой ситуации блоки С55? Что произойдет, если внутрь блока, 
например, поместить картинку, ширина которой превышает заданное для блока значе- 
ние из ЕВ, или если внутри блока окажется очень длинное слово, которое будет превы- 
шать ширину блока? 

Очевидно, возможных вариантов поведения два. Первый — по аналогии с ячейками 
таблиц, т.е. блок булет растягиваться, чтобы вместить все содержимое. Второй вариант — 
блок останется неизменным по ширине, а содержимое перекроет блок (будет расположе- 
но как бы поверх блока). 

Самое интересное, что в спецификации С$$ ничего не говорится о том, как в этих 
случаях должен вести себя блок. Нам ничего не остается, как рассмотреть ситуацию на 
практическом примере и решить, как обойти или исправить подобную ситуацию при ее 
возникновении. 

Итак, давайте для примера возьмем не очень широкий блок и зададим для него сле- 
дующий стиль: 
<5ТҮІЕ> 
#паггом { 

Ъаскакоила: #ҒРЕЕСС; 

Богдег: 1рх зо11а #660033; 

раддіпа: Лет; 

міаєћ: 120рх 


} 
</5ТУШЕ> 


<РТУ Ір= *паггом"> 

Ширина области контента должна быть равна 100 пикселей. Что произойдет, если 
туда поместить оченьдлинноеслово? 

</0гу> 
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Давайте посмотрим, как такой код отобразят разные браузеры. Браузер Ниегпе Ех- 
рогегб покажет его так, как представлено на рис. 15.10. Как видите, блок растянулся, 
чтобы вместить “оченьдлинноеслово”, т.е. блок ведет себя так же, как ячейка таблицы 
вязыке НТМІ. 


Эвлоковая модемь - Митозой еее Р 


1 Ширина 
1 области 
контента 
должна быть 
равна 100 
1 пикселей Что 
1 произойдет 
1 если туда 
1 поместить 
| оченьдлинноеслово? 


Рис. 15.10. В браузере [тетей Ехріоғеғ блок 
растягивается, чтобы вместить в себя все 


содержимое 


В окне браузера Мога мы увидим то, что показано на рис. 15.11 (аналогичную картину 
увидим и в браузере Орега 5+). Здесь блок не меняет своей ширины, она остается равной 
100 пикселей, а содержимое, которое не помещается по ширине, перекрывает блок. 


контента 
должна быть 


пикселей. Что 
| произойдет 
если туда 
поместить 
оченьдлинноеслёво? 


ді 
2] 
Рис. 15.11. В браузерах Мога и Орега избы- 
‘точное содержимое будет перекрывать блок. 


2 Га Таа 
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Таким образом, существует два абсолютно противоположных подхода, и у нас нет ме- 
ханизмов и средств поменять ситуацию, поскольку алгоритм работы заложен внутри са- 
мих браузеров. Однозначно сказать, какой из браузеров поступает правильно, а какой 
нет, также нельзя, поскольку спецификацией не определен “правильный” режим работы 
в подобных случаях. 

Первый вариант работы кажется более приемлемым скорее потому, что он привыч- 
нее — так ведут себя НТМ!-таблицы, и все давно привыкли к этому механизму. При 
рассмотрении таблиц в НТМІ. мы говорили, что атрибут 1 АЕЪ задает лишь рекомендо- 
ванную ширину ячейки, и она может меняться. Поэтому мы особо обрашали внимание на 
то, что в ячейках таблиц нужно очень аккуратно пользоваться символами неразрывных 
пробелов, поскольку перенос осуществляется именно по словам. Рассмотрим конкрет- 
ный пример. Здесь задана таблица, состоящая всего из одной ячейки, и ее ширина уста- 
новлена равной 200 пикселей. 


<ТАВЬЕ ВОВОЕВ=”1" СЕШ.РАРрмс="0" СЕШ.БРАСІМС="0" МІрТН="200"> 
<тв> 
<Тр>Будьте внимательны, используя символ неразрывного пробела. </70> 
</тв> 

</ТАВЬЕ> 


При этом в браузере все будет выглядеть очень хорошо (рис.15.12). 


"Будьте внимательны, — | 
"используя символ 
`'неразрывного пробела _ | 


Рис. 15.12. Таблица, состоя- 
щая из одной ячейки 


Если же воспользоваться неразрывными пробелами, то задание содержимого ячейки 
будет выглядеть следующим образом. 
Будьте&пЬвр; внимательны, &пЬѕр; используя&пЬѕр; символёпЬвр; неразрывногокпЬѕр; 
пробела. 

В браузере картина при этом также значительно изменится и станет такой, как пока- 
зано на рис. 15.13. Как видите, ячейка таблицы растянулась, чтобы вместить все содер- 
жимое, и ее ширина уже составляет примерно 440 пикселей. 


Бернини Иоан араса тараран ровен) 


Рис. 15.13. Та же ячейка таблицы при использова- 
нии неразрывных пробелов. 


А теперь представьте, что вы верстаете сайт в несколько колонок. Первая колонка 
должна быть довольно узкой (скажем, для навигации), но в результате неаккуратного ис- 
пользования неразрывных пробелов или просто потому, что в нее было случайно поме- 
щено содержимое, превышающее заданную ширину ячейки, колонка растянулась в 2-2,5 
раза. Это искорежит ваш дизайн до неузнаваемости. 

В таком случае вариант, выбранный разработчиками браузеров Моа и Орега, более 
приемлем: пусть содержимое перекроет блок, зато общий дизайн страницы при этом не 
пострадает. 

Как бы там ни было, все давно привыкли аккуратно пользоваться неразрывными 
пробелами и осторожно относиться к содержимому, превышающему размеры контейне- 
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ра, будь то ячейка таблицы или блок, созданный при помощи С55. По сути, проблема 
критической не является — следите за тем, чтобы содержимое соответствовало блоку, и 
все будет в порядке. А также не пугайтесь, если вдруг увидите, как чрезмерно большое со- 
держимое блока перекрываст его по ширине. 

В С55 2 есть еще несколько свойств, позволяющих регулировать ширину и высоту 
блоков, точнее их максимально и минимально возможные значения: 


піп-міаєһ — минимальная ширина блока; 
тах-мідсћ — максимальная ширина блока; 
тіп-һеісһе — минимальная высота блока; 
тах-Һеідһе — максимальная высота блока. 


Жаль только, что пользоваться ими практически невозможно, поскольку поддержива- 
ются они лишь браузерами М№еіѕсаре 6.х и Орега 5+. Также их поддерживает браузер Іпіегпеї 
Ехріогег 6, но только для элементов ТЕ, ТН и ТО. Тем не менее свойство тіп-һеісће неза- 
менимо в том случае, если вы хотите ускорить обработку таблицы. 


Ускорение обработки таблиц в С$5 


При изучении таблиц в НТМЕ описывались два алгоритма их обработки: фиксирован- 
ный и автоматический. В С$$ им соответствуют два значения свойства саЪ1е-1ауочце. 


саБ1е-1ауоцЕ: аџбо — автоматический алгоритм обработки (устанавливается по. 
умолчанию). Он довольно медленный, потому что таблица не выводится на экран до 
тех пор. пока браузер не скачает все ее содержимое — иначе он просто не сможет 
просчитать параметры таблицы: количество столбцов, их размеры, отступы внутри 
ячеек и т.п. Особенно это критично, когда таблица или очень длинная, или в ней 
множество графических объектов. Поэтому и рекомендуется разбивать большие таб- 
лицы на несколько отдельных, размером поменьше, чтобы пользователь смог уви- 
деть хотя бы часть М№еб-страницы, пока ее остальное содержимое загружается. 
саБ1е-1ауоце: Е1хеа — фиксированный алгоритм обработки позволяет быст- 
рее обработать и просчитать содержимое таблицы. Он работает быстрее, потому 
что не учитывает содержимого отдельных ячеек, а оперирует лишь общими пара- 
метрами таблицы: шириной самой таблицы; шириной столбцов, определенной 
в элементах сор и СОБСВООР или элементов ТР первой строки таблицы; расстоя- 
ниями между ячейками и отступами внутри ячеек. Если же данные о ширине ячеек 
будут недоступны, браузеру придется ждать загрузки содержимого ячеек и соглас- 
но ему вычислять размеры таблицы. 


Поэтому для быстрой обработки таблиц рекомендуется использовать элементы сор, 
чтобы заранее указать размеры столбцов таблицы и позволить фиксированному алгорит- 
му быстро просчитать ее размеры. 

Задать режим фиксированной обработки можно, например, непосредственно внутри 
таблицы. 


<ТАВЬЕ ВОВРЕ! 


"1" СЕБ.РАБРТМК 


0" СЕІЛ.5РАСІМС: 


зтуцЕ="ЕаБ1е-1ауоцЕ: Ғіхей" итотн-"200"> 
</ТАВЬЕ> 


Давайте рассмотрим простой пример таблицы. 


<ТАВЬЕ ВОВРЕВ="1" СЕБ.РАООТМС="О" СЕШ.ЅРАСІМС="0" 
ЅТҮЕ="Бар1е-1ауоџс: Ғіхей" итотн="400"> 
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«СО ИТОТН=“200“><СОГ, ИТОТН="200"> 
<тв> 
<Тр>Будьте внимательны, используя символ неразрывного пробела. </тр> 


<ТО>БудьтейпЬзр; внимательны, &прер;используя&прер; символёпЬзр; неразрывного&прѕ 
р;пробела.</Тр> 

</тв> 
</ТАВЬЕ> 


В браузере Ниегпег Ехріогегб такая таблица будет отображена так, как показано 
на рис. 15.14. 


е БК Уют Ракнтез Лоб 8 
о-о: ла о ажа -.В- ща 
> 


дьте внимательны, 
используя символ Будьте внимательны, исполь 
'неразрывного пробела. | 


Ў ну Сотрдњг 


Рис. 15.14. Если содержимое ячейки фиксированной 
таблицы превышает ширину ячейки, оно обрезается 


Как вы видите, размеры ячеек зафиксировались, и содержимое, превышающее фик- 
сированный размер, попросту обрезается. В предылущих примерах, когда по умолчанию 
использовался режим автоматической обработки таблиц, ячейка автоматически расши- 
рялась, чтобы вместить содержимое. Пример на рис. 15.14 наглядно иллюстрирует работу 
алгоритма фиксированной обработки таблиц. 

Но пока речь шла только о ширине ячеек таблицы. Как же дела обстоят с высотой? 
Давайте рассмотрим еще один пример. 
<ТАВЬЕ ВОВОЕВ="1" СЕШ.РАРЮІМО="0* СЕШ.ЅРАСІМС= 
БТҮ.Еа"бар1е-1ауоше: #іхөй" итотн="200"> 
<тВ> 

<ТО ВТҮЦЕ="Һеіфһе:50рх">Высота этой ячейки не будет превышать 50 пикселей, 
поэтому ее содержимое будет обрезаться.</ТО> 
</ТЕ> 
<тв> 

<ТО БТҮЦЕ="шіп-Һеідһ:200рх">Высота этой ячейки будет равна минимум 200 
пикселям, поэтому ее содержимое поместится в ячейку полностью</ТО> 
</тв> 
</ТАВЬЕ> 


В браузере Имегпее Ехріогегб такая таблица будет отображена так, как показано на 
рис. 15.15. Как видите, высота первой ячейки зафиксирована и равна 50 пикселям, а со- 
держимое, превышающее эту высоту, просто обрезается. Для задания высоты второй 
ячейки использовалось свойство тіп -ћеі оћ, и ее содержимое уже не обрезалось. 
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Бе этой ячейки 
удет превышать 50 


росли бачеррятоноте н ИВ 
Высота этой ячейки будет 
равна минимум 150 
‘пикселям, поэтому ее 
{Содержимое поместитсяв 
‘ячейку полностью 


Рис. 15.15. Результаты исполь- 
зования свойства тіп-Һеісһ 
при определении высоты ячеек 
фиксированной таблицы 


Свойство саБ1е-1ауоцЕ: Ғіхеа хоть и значительно ускоряет обработку, таблиц, 
но, к сожалению, работает только в браузерах, выпущенных корпорацией Мисгозой. Тем 
не менее, пока для верстки страниц еще используются таблицы, лучше ускорять их обра- 
ботку или разбивать большие таблицы на более мелкие. Все же есть надежда на то, что 
скоро при верстке страниц будут пользоваться исключительно блоками С55, а таблицы 
НТМІ. будут применяться только по их прямому назначению — для структуризации 
данных в виде таблицы. 

Итак, вернемся к блокам С$$. Мы научились их создавать, теперь давайте разберем- 
ся, как же они размещаются в окне браузера. 


Модель визуального форматирования 


Модель визуального форматирования — это метод, который использует браузер при 
обработке дерева элементов документа, чтобы отобразить все элементы на экране ком- 
пьютера или другого визуального устройства. 

В соответствии с моделью визуального форматирования каждый элемент дерева до- 
кумента порождает некоторое произвольное количество блоков (а может и не порождать 
‘блоков вовсе). Размещение этих блоков в окне браузера обусловливается несколькими 
показателями, и прежде всего, размерами и типом блока. Как вы помните, бывают эле- 
менты, порождающие структурные и строчные блоки. 

Рассмотрим простой пример кода. 

<рту> 

Простой текст порождает безымянный структурный блок 

<Р>Структурный блок параграфа с <ЕМ>выделением - строчным блоком</ЕМ>. Оста- 
ток параграфа - безымянный строчный блок</Р> 

Еще один фрагмент текста, порождающий безымянный структурный блок 

</рту> 

На этом примере легко разобраться, какой из элементов порождает блоки какого типа 
(рис. 15.16). Причем блоки могут быть и безымянными, если нет элемента, породившего 
их. Элемента нет, а блок есть, и в этом случае он будет безымянным. 
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Структурны 
Безымявные ст 


блокР 
ктурные блоки 


Главный структурный блок ПТУ. 
Рис. 15.16. Структурные и строчные блоки 


Далее, в С$$ существует понятие схемы позиционирования (алгоритма), от которой 
также будет зависеть размещение блоков на экране. И наконец, взаимное расположение 
блоков рядом друг с другом также может оказывать влияние на внешний вид документа. 
Это проявляется, например, при перекрытии полей соседствующих элементов. 

В стандарте С$$ 2 положение и размеры блоков вычисляются относительно контей- 
нера. Контейнером для любого блока, как правило, служит его непосредственный предок 
в дереве элементов документа. Например, элемент ВОБУ (точнее, порождаемый им блок) 
служит контейнером для всех остальных блоков. Окно браузера также может служить 
контейнером для некоторых блоков. 

В приведенном выше примере элемент рту является контейнером для двух безымян- 
ных структурных блоков и одного блока Р. 

Относительно контейнера, содержащего блок, задается лишь положение этого блока, 
аего размеры никак не зависят от размера контейнера и даже могут его превышать. Ина- 
че говоря, блок может выходить за пределы контейнера. Например, когда содержимое 
НТМЕ-страницы не помещается по ширине в окно браузера, появляется дополнительная 
горизонтальная полоса прокрутки. 

Корневой элемент досегее порождает блок, который выступает в качестве начально- 
го контейнера для последующих элементов, потомков корневого элемента. Начальный 
контейнер нельзя позиционировать или перемещать. 

В НТМЕ точно позиционировать некий элемент можно только в том случае, если по- 
местить его в ячейку таблицы. Дизайнеры и “полюбили” таблицы за то, что они дали им 
инструмент позиционирования элементов на странице, хотя предназначались они для 
другого. Как уже упоминалось, появление поддержки таблии в браузерах вызвало небы- 
валый подъем в сфере М№еЬ-дизайна. Язык С$$ обладает своими возможностями при по- 
зиционировании блоков. Но прежде чем приступать к изучению этих механизмов, необ- 
ходимо разобраться с тем, какого типа блоки существуют в С$$. 


Виды блоков — свойство аіѕріау 


Поведение каждого блока зависит от его типа, который задается свойством ді ѕр1ау. 
В целом, как вы уже знаете, все блоки можно разделить на структурные и строчные. 
Свойство діѕр1ау в спецификации С$$ | позволяет задать только 4 значения: попе, 
іп1іпе, Ь1оск и 1іѕе-ісет. В спецификации С$5$ 2 их намного больше, но далеко не 


все они поддерживаются браузерами, поэтому зачастую приходится ограничиваться 
только блоками, описанными в С5$ 1. 
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Как уже говорилось, свойство Я1эр1ау позволяет задать тип конкретного блока. Ес- 
тественно, что у каждого элемента есть значение по умолчанию, но его можно изменить. 
Например, можно сделать заголовок не структурным, а строчным блоком. Вполне логи- 
чен вопрос: а зачем это надо? Ниже будут приведены несколько интересных примеров, 
которые, надеюсь, объяснят вам, зачем это может понадобиться. 

Благодаря использованию свойства діѕр1ау в С$$ можно создавать такие элементы, 
которые невозможно реализовать срелствами НТМІ., даже если присоединить к ним уже 
изученные возможности и свойства С$$. 

Итак, сначала рассмотрим возможные значения свойства діѕр1ау. 


Значение попе 


Это значение отключает отображение блока в окне браузера, как будто его никогда не 
было в коде страницы. В С$$ есть еще одно, на первый взгляд, похожее свойство уіѕі- 
ъі1ісу:Һідаеп — однако оно лишь делает элемент прозрачным, но при этом он про- 
должает присутствовать на странице и занимать отведенное для него место. Рассмотрим 
конкретный пример. 


<НВ> 
<Р>Первый параграф. Свойство а1зр1ау установлено по умолчанию </Р> 
<Р БТҮІЕ="дівр1ау:попе">Второй параграф; установлено свойство 
діѕр1ау:попе</Р> 

<Р>Третий параграф. Свойство діѕр1ау установлено по умолчанию </Р> 
<нА> 

<Р>Первый параграф. Свойство дізр1ау установлено по умолчанию </Р> 
<Р 8ТҮЦЕ="уівірі1ісу:ћіддеп">Второй параграф; установлено свойство 
уівірі1ібу:һіддеп</Р> 

<Р>Третий параграф. Свойство дівр1ау установлено по умолчанию </Р> 
<НВ> 


В любом браузере увидим одинаковую картину, показанную на рис. 15.17. Как видите, 
в первой группе второй абзац с установленным свойством ді ѕр1ау : попе просто отсут- 
ствует на экране, поэтому сразу после первого абзаца идет третий. Во второй группе аб- 
зац с установленным свойством уіѕірі1і су :Һіддеп также отсутствует на экране, но 
его место остается незанятым. Иначе говоря, он по-прежнему находится на своем месте, 
но является прозрачным, вследствие чего невидим. То же самое будет происходить с лю- 
бым другим блоком, для которого задано свойство уі =ірі1і бу : пі адеп: место на стра- 
нице для этого блока будет резервироваться, но оно ничем не будет занято, просто оста- 
нется пустым. Блок со свойством аі ѕр1ау : попе будет удален со страницы совсем и по- 
этому не будет занимать места. Думаю, на этом примере явно видна разница между двумя 
свойствами аі ѕр1ау : попе и уіѕірі1ібу:ћҺіддеп. 


Первый параграф. Свойство зрізу установлено по умолчанию 


Третий параграф Съойство Фзрізу установлено по умолчанию 


Первый параграф Свойство зрізу установлено по умолчанию 


Третий параграф Свойство Фару установлено по умолчанию 


Рис. 15.17. Визуальное отличие в действии свойств 
аіер1ау:попеи уіѕіЬі1ібу:Һіадеп 
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Для чего может понадобиться свойство 91зр1ау:попе? Например, вы создаете сайт, 
где разным категориям пользователей будет предоставляться разная информация. Если 
это зарегистрированный пользователь, то он получает больше информации — например, 
на экран выводится блок с информацией о мероприятиях для членов клуба. Если это 
гость вашего сайта, то ему эта информация не нужна. Тогда в зависимости от того, кто 
зашел на сайт, с помошью какого-либо языка программирования, на котором реализует- 
ся сайт, или языка сценариев ЈауаЅсгірі вы можете добавить или удалить свойство діѕ- 
р1ау: попе для блока с той или иной информацией. Когда новый посетитель зарегист- 
рируется, свойство ді ѕр1ау вновь может принять значение Ь1оск, и скрытая ранее ин- 
формация будет отображена. 

Еще один пример использования свойства а: зр1ау:попе — создание раскрываю- 
щихся меню по аналогии с меню Міпіомѕ. Вы создаете перечень команд меню, а затем 
в отдельных блоках создаете перечни команд подменю лля каждой такой команды. Для 
всех этих блоков задается свойство аі ѕр1ау : попе, т.е. исходно они не видны. Затем, 
когда пользователь щелкает на команде меню, для блока его подменю включается новое 
значение свойства аі зр1ау:Ъ1оск, и подменю выводится на экран. Если пользователь 
повторно щелкает на команде меню, его подменю закрывается. 

Предложенный механизм очень эффективен. Во-первых, к такому типу меню все дав- 
но привыкли, поскольку чаще всего работают с операционной системой \Міпіоуѕ, в ко- 
торой дерево дисков и папок работает по такому же принципу: шелкнул на кнопке с изо- 
бражением “+” — структура папок развернулась, повторно щелкнул — свернулась. Во- 
вторых, такой полход позволяет сократить размеры самого навигационного меню, делает 
‘более логичной структуру разделов сайта, а значит, пользователю проще на нем ориенти- 
роваться. Недостаток только один — такое меню не уластся реализовать в браузере 
Орега, поскольку в нем плохо реализована объектная модель документа (ром). Именно 
она позволяет обрашаться к конкретному объекту на странице и менять его параметры, 
поэтому в браузере Орега не получится линамически менять значение свойства аі ѕр1ау. 

Само же объявление йі ѕ=р1ау: попе одинаково хорошо работает в любом браузере, 
так что с этим никаких проблем не будет. 


Значение Моск 


Рассматриваемое значение уже упоминалось выше: оно использовалось с целью вос- 
становления видимости блока после объявления ді ѕр1ау : попе. Само по себе это объ- 
явление просто определяет некий элемент как структурный блок. Многие элементы 
НТМЕ по умолчанию определяются именно так — например, заголовки, абзацы, табли- 
цы и др. Однако с помощью этого объявления можно и любой другой элемент сделать 
структурным блоком, вопрос только в том, когда в этом есть необходимость? 

Первый случай мы уже назвали: это восстановление видимости блока, объявленного как 
А1зр1ау:попе. Второй случай, когда это может пригодиться, — создание оригинального 
навигационного меню из ссылок, каждая из которых будет отдельным структурным блоком. 
Чтобы лучше понять, о чем идет речь, давайте рассмотрим пример. Вы создаете навигаци- 
онное меню для вашего сайта, состоящее из нескольких ссылок на отдельные разделы сай- 
та. Поместим это меню в собственный блок, например, таким образом: 
<01у Ір="пепи"> 
Зпдех Ней ">Главная</А> 

<А НКЕР="Һізсогу. ВЕ *>История</А> 

<А НВЕЕ="ркодисев .ВЕт] ">Продукция</А> 

<А НВЕР= "=һорз Вт] “>Магазины</А> 

<А НКЕР="сопбасё .ВЕ ">Контакты</А> 
</рту> 


Глава 15. Использование блоков 289 


Если посмотреть на этот код в окне браузера, то увидим просто пять ссылок в одну 
строку, и пока больше ничего. Теперь мы дополнительно напишем таблицу стилей для 
нашего меню, и тогда вы увидите, как изменится ситуация. 

Пункты нашего меню сейчас располагаются в строчку, поскольку элемент А является 
строчным элементом. Чтобы принудительно осуществить переход на новую строку, по- 
сле каждой ссылки следует добавить элемент ВЕ. 
<0ІУ Ір="пепц"> 
пдех.Һот ">Главная</А><ВЕ> 
="Һіѕёогу.Һеті ">История</А><ВВ> 
"ргойисез .ВЕт1 ">Продукция</А><ВВ> 
*зВорз.Нет1 *>Магазины</А><ВЕ> 


<А НКЕР=*сопсасе . ВЕ ">Контакты</А> 
</от\у> 


Тенерь напишем таблицу стилей для блока #тепи. Пусть у него будет синий фон, 
а ширину блока зададим равной 120 пикселям. Для этого запишем простое правило. 


#тепи( 
Баскогоџпа : #416981; 
элаЕВ: 100рх; 


Далее необходимо написать правило для отображения ссылок: желтый цвет, размер 
0,8 ет, полужирное начертание, гарнитура Апа!. Кроме того, удалим подчеркивание по 
умолчанию. 


фтепи А{ 
со1ог : #ҒЕЮ700; 
Ғопе:Ьо1а 0.8ет Акіа1, зап-зек1Е; 
бехг-десогабіоп: попе; 


Контекстный селектор используем здесь для того, чтобы правило не затронуло других 
ссылок на странице и касалось только ссылок внутри блока меню. 

Если требуется задать стиль оформления ссылок в момент наведения на них указателя 
мыши, то необходимо использовать псевдокласс поуег. Допустим, мы хотим, чтобы при 
наведении указателя фон ссылки стал светло-голубым, а цвет символов — темно-синим. 
Запишем соответствующее правило: 


#тепи А:һоуег( 
со1ог: #333399; 
Баскагошпі: #ССЕЕЕР; 


В результате после наведения курсора на ссылку будет меняться только фон за тек- 
стом ссылки, как показано на рис. 15.18, а остальной фон этой же строки останется по- 
прежнему темно-синим. 


Рис. 15.18. Ссылка пока является 
строчным блоком, поэтому цвет фо- 
на меняется только для текста 


Происходит это потому, что элемент А является строчным, а не структурным. В ре- 
зультате фон меняется только в той области, где написан текст. Но если объявить ссылки 
внутри меню структурными блоками — при помощи свойства ді ѕр1ау :Ь1осК, то тем 
самым мы решим сразу две проблемы. Во-первых, нам больше не понадобятся принуди- 
тельные переводы строк, а, во-вторых, фон при наведении курсора будет меняться сразу 
во всей строке — как нам и нужно (рис. 15.19). 
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Рис. 15.19. Ссылка является 
структурным блоком. 


Код при этом будет следующим: 
<5тҮІЕ> 
#птепи( 
Баскагоипа : #4169Е1; 
мій: 100рх; 
} 
#тепи А{ 
со1ог: #ҒЕ0700; 
Ғопе :ро1а 0.8ем Агіа1, ѕап-ѕегіё; 
сехі-десогасіоп:попе; 
аівр1ау:Ь1оск 


#тепи А:Боуек( 
со1ог: #339; 
Ъаскакойипа: #СЕЕ; 


Р) 
</5ТҮІЕ> 


<0ІУ Ір=*тепц"> 

<А НВЕЕ-"1п4ех.ВЕка ">Главная</А> // Переводы строк ВВ уже не нужны 
<А НЕЕР="Һіѕсогу. Һот] *>История</А> 

<А НКЕР="ргодисз . Һот] ">Продукция</А> 

<А НВЕЕ="5Борз Һот] “>Магазины</А> 

<А НЕЕР="сопбасё „Вет ">Контакты</А> 

</от\> 


При этом код будет корректно работать во всех браузерах. А чтобы наше меню лучше 
смотрелось, можно добавить отступы сверху и снизу меню — это поможет поместить не- 
много синего фона перед пунктом “Главная” и в конце меню. Чтобы добиться такого 
эффекта, нужно прописать свойства радаіпс-сор и райА1пд-БоЕ сот для всего блока 
в целом (но не для ссылки). 
райдіпа-бор: 1ет; 
райӣіпо-Ьосбот: 1ет; 

Чтобы немного сократить запись, можно воспользоваться стенографическим свойст- 
вом радӣіпо: 1ет 0. Тогда правило будет выглядеть так: 
тети { 

Баскакоипа: #41691; 


райіпд: 1еш 0; 
міасћ: 100рх; 


Кроме этого, сейчас текст плотно прилегает к левому краю блока меню, и если его 
немножко отодвинуть, меню будет смотреться лучше. Понятно, что тут тоже надо вос- 
пользоваться отступами, но для какого именно элемента их надо задать: для самого блока 
меню или для ссылок А? Давайте проверим. Зададим отступ слева для блока #тепи. 
#щепи( 

Ђасксгоцпа: #4169Е1; 

радаіга:1ел 0; 

раййіпу-1еЁб: 0.5ешу 

міс: 100рх; 
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Тогда при наведении указателя на ссылку слева будет оставаться не закрашенная го- 
лубым цветом полоска шириной 0,5 ет — отступ внутри блока меню (рис. 15.20). 

Это, конечно, оригинально, но не совсем то, что нам нужно. Нам нужно, чтобы от- 
ступ слева был, но тоже закрашивался голубым при наведении указателя мыши на ссыл- 
ку. Поэтому отступ слева нужно указывать в правиле для элемента А, чтобы все работало, 
как нам нужно, и полноценное меню будет выглядеть так, как показано на рис. 15.21. 


#тепи А{ 
со1ог: #220700; 
Ғопс:Ьо1а 0.8ет Агіа1, зап-зек1Е; 
Еехе-ЧесокаЕ1оп:попе; 
райдіпо-1е#с: 0.5ещ; 
дізр1ау:р1оск 


Рис. 15.20. Отступ задан Рис. 15.21. Отступ задан для 
для блока меню в целом ссылки внутри блока меню 


Надеюсь, этот пример помог разобраться с особенностями использования значения 
ӣіѕр1ау:Ь1оск и, кроме этого, подал оригинальную идею для оформления меню на 
сайте. 


Значение іпііпе 


Это значение определяет строчный блок. Многие элементы НТМІ. по умолчанию 
имеют такое значение свойства діѕр1ау — например, ЕМ, І, ЗРАМ, СІТЕ и др. На прак- 
тике это значение может быть полезно в тех случаях, когда необходимо преобразовать 
структурный блок в строчный. 

Приведем пример с заголовками. Заголовки Н1-Нб, как вы знаете, образуют струк- 
турные элементы, и если в НТМІ -локументе записать сначала заголовок, а потом некий 
текст, то текст будет обязательно начинаться с новой строки. Если данную ситуацию тре- 
буется изменить, то следует написать такой код: 
<5ТҮІЕ> 
На(діѕр1ау:іп1іпе} 

Р{адізр1ау:іп1іпе) 
</5ТҮЕ> 


<Н4>Заголовок. </Н4> 
<Р>Фрагмент текста, который следует непосредственно за заголовком, в той же 


строке.</р> 

Обратите внимание, что свойство аі ѕр1ау: іп1іпе следует применить к обоим эле- 
ментам: заголовку Н4 и абзацу Р. Если этого не сделать, то один из элементов все равно 
будет обязательно начинаться с новой строки. В нашем же примере при просмотре в окне 
‘браузера вы увидите эти элементы так, как показано на рис. 15.22. 
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Рис. 15.22. Результат применения свой- 
ства діѕрІау:іпііпе 


Это свойство не подлерживается браузерами старых четвертых версий, а для совре- 
менных браузеров оно проблемой не является. Учитывая то, что четвертые версии уже 
практически не используются, можно не обращать на это внимание, тем более что в этих 
браузерах заголовок и абзац булут отображены как обычно — на отдельных строках, что 
никак не отразится на восприятии текста. 


Значение іѕї-Жет 


С помощью этого значения элемент становится частью списка. По умолчанию это 
значение установлено для трех элементов: ОГ, Л. и І. Именно к ним можно было при- 
менять свойства группы 1156 -ѕсу1е, которые мы рассматривали ранее, а к другим эле- 
ментам эти свойства нельзя применять до тех пор, пока свойство аі ѕр1ау для них не бу- 
дет установлено в 115Е-1Еем. 

При использовании данного объявления в список можно превратить что угодно, лю- 
бые структурные блоки. Например, можно пронумеровать все заголовки в документе. 
Однако это значение свойства діѕр1ау не полдерживается браузерами в полной мере, 
тем более что в НТМІ. есть специальные элементы для создания списков и лучше все же 
пользоваться ими. 


Подключение таблиц стилей при помощи Чауа5 сир 


Этот способ универсальный, и с его помощью можно устранить любые несоответст- 
вия в работе различных браузеров. Единственный случай, когда он не сможет помочь, — 
отключение поддержки }ауа$спри в браузере. Иногда так поступают в целях безопасно- 
сти. Но чаще всего 1ауа5спр! поддерживается, и тогда вы можете воспользоваться любым 
ранее написанным сценарием. которых существует уже великое множество. Или. если вы 
знакомы с языком ЈауаЅстірі. можете написать его самостоятельно. 

Я вас познакомлю с простым сценарием, который описан в книге Михаила Дубакова. 
Он довольно прост и после некоторых пояснений будет понятен даже тем, кто вовсе не 
знаком с программированием на языке Јауа$сгірї. 

Итак, как вы помните, согласно принципам каскадирования, правила, записанные 
в таблице ранее других, могут переопрелеляться последующими правилами. Например, 
если сначала мы установили для некоторого объекта красный цвет, а впоследствии напи- 
сали для этого объекта аналогичное свойство, но определяющее уже синий цвет, то в 
итоге цвет объекта будет синим, т.е. реально применяется последнее правило в таблице 
стилей. Соответственно, когда к НТМІ -документу при помощи элемента ІМК подклю- 
чается несколько таблиц стилей, преимущество имеют правила из последней подклю- 
ченной таблицы. Это нужно всегда помнить при написании документа и оформлении 
разных таблиц стилей для различных браузеров. 
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В большинстве случаев браузеры ведут себя одинаково, поэтому можно написать об- 
щую для всех таблицу стилей сотпоп.сѕѕ и подключить ее к документу в первую оче- 
редь. Затем, в зависимости от того, каким браузером пользуется ваш посетитель, можно 
‘будет подключить дополнительную таблицу, написанную специально для этого браузера 
и предназначенную для устранения его недостатков и несоответствия стандартам. 

Как мы уже говорили ранее, в общем виде можно выделить три типа распространен- 
ных в настоящее время браузеров, у каждого из которых имеются свои особенности. Во- 
первых, это браузеры фирмы Місгоѕой — Ииегпе! Ехріогег 5.х и 6. Во-вторых, это браузер 
Моа (Мебсаре Мамвагог работает аналогично, так как построены они на одном движ- 
ке). В-третьих, это браузер Орега 5+. 

Таким образом, всего потребуется написать четыре таблицы стилей. 


1. соттоп.сеѕ — общая для всех браузеров; будет подключаться к документу в пер- 
вую очередь. 

2. іе.сѕѕ — для Імегпе! Ехрюгег. 

3. ш2.св5 — для браузера Мога. 

4. ор.сѕѕ — для браузера Орега. 


В этом случае в секции НЕА” документа должна присутствовать следующая конструкция: 


<Е1МК ВЕБ-"зЕу1езНеек" ТУРЕ="КехЕ/св5" НВЕР="соттоп.св5"> 
<5СВТРТ куре="КехЕ/Зауавск1ре"> 
ца=пау1чакок .изегАдепе; 


1='<11МК ВЕГ="збу1езћееб" ТҮРЕ="Сехб/свз" НВЕЕ="'; 
с='.с58">'; 
ЗЕ (ча.1пдехо# ('ІЕ 5') 1) дӢоситепе .мтісе(1+'іе5'+с); 


ЗЕ (џа.іпдехО# (‘ТЕ 6') 


+ 1) аоситепе.мт1 Ее (1+'1е'+с); 
ЗЕ (па. 1паехоЕ ('Орега') ! 


1) аосилепі .мтібе(1+'ор'+с 


3Е (џа.іпаехО# ('Мебѕсареб')!=-1) досипепё .мтібе (1+ 'т2'+с) ; 
ЗЕ (џа.іпаехоЁ ('Сеско')!=-1) доситепе.мтісе (1+'т2'+с); 
</5СКІРТ> 


Первой строкой мы подключаем к документу внешнюю таблицу стилей, храняшуюся 
в файле соттоп. сѕѕ. Она установит общие для всех браузеров свойства, которые затем 
корректируются специфической таблицей стилей, выбираемой в зависимости от типа 
браузера пользователя. 

Далее идет просто сценарий, написанный на языке Јауа$сгірї, о чем свидетельствует 
атрибут суре="сехё/јауаѕсгірё" элемента 5СВТРТ. Пронумеруем строки этого сце- 
нария, чтобы было проще в них ориентироваться. 


1. чазпаулдасог.изегАдепЕ 
2. 1='<1ІМК ВЕБ="5Еу1езНеее" ТУРЕ="КехЕ/сз5" НКЕРҒ="' 
3. с='.свв“>' 


4. 1Е (џа.іпдехоғ (‘ТЕ 5') 


1) досотепе .мгібе(1+'іе5'+с) 


. 1Е (ца.1оаехОЕ('ТЕ 6')!=-1) доситепі.мтібе(1+'іе'+с) 


1) аоситепё .мтібе(1+'ор'+с) 
. 1Е (ца.1паехоОЕ ('М№еёѕсареб')!= 


5. 

6. 1Е (па.1паехоОЕ ('Орега') 
7, 1) доситеп .мгібе (1+'т2'+с) 
8. 


. 1Е (џа.іпаехо# ('Сеско')! = 


1) доситепе .мтісе (1+ 'т2'+с) 
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Первая строка записывает в переменную ца объект, представляющий собой строку, 
которую браузер пользователя отсылает Мер-серверу для своей идентификации. Строка 
содержит имя браузера, его версию и название движка, на основе которого сделан брау- 
зер. Вот несколько примеров таких строк из разных браузеров. 

Мо2111а/4.0 (сопрабіЫ1е; МЅІЕ 6.0; Иіпіомѕ МТ 5.1; .МЕТ СЬВ 1.1.4322) 
М072111а/4.0 (сотрасіб1е; МЗТЕ 6.0; Міпдомѕ МТ 5.1) Орега 7.51 [еп] 
Мо2111а/5.0 (Міпдоыѕ; О; Міпдомѕ МТ 5.1; еп-05; гу:1.7) беско/20040616 


Во второй строке вводится переменная 1, она представляет собой первую часть стро- 
ки элемента отм к, предназначенного для подключения корректирующей таблицы сти- 
лей. В третьей строке идет окончание строки записи элемента ТМК, которое записываст- 
ся во вторую вспомогательную переменную с. 

В строках 4-8 выполняется определение модели браузера пользователя и в зависимости 
от этого в документ записывается соответствующий элемент ІМК с нужным названием 
внешней таблицы стилей. Разберем эту процедуру подробнее на примере четвертой строки. 
1Е (ца.1пдехоЕ('ТЕ 5') 1) досипепе .мгібе(1+'іеб'+с); 


К переменной ца применяется метод іпаехоғ, который определяет позицию вхожде- 
ния в переданную браузером пользователя строку идентификации подстроки ('ТЕ 5'), 
указанной в качестве его аргумента. Грубо говоря, он берет строку, записанную в перемен- 
ную па, и анализирует ее с целью отыскания заданного названия браузера. В том случае ес- 
ли оно будет обнаружено, метод ца . і пдехоОғ возвращает значение, равное номеру позиции 
в строке, где это название начинается. Если метод іпдехоғ возвращает значение –1, то за- 
‘данная подстрока в исходной строке не была найдена. 

Конструкция ТЕ в сценарии реализует ветвление в алгоритме. В первой его части ста- 
вится условие, и если оно выполняется, то работа продолжается, в противном случае 
сценарий переходит к следующей строке. В нашем случае конструкция ТЕ проверяет, 
было ли найдено название нужного браузера в строке ца. И если это нужный нам брау- 
зер, в документ записывается название соответствующей таблицы стилей. Если название 
не найдено, проверяются другие браузеры. 

Запись "!=" обозначает “не равно”. Таким образом, запись "1Е (па.1п4ехоЕ 
(‘ТЕ 5') !=-1) " означает следующее: проверить, не получаем ли в качестве значения 
метода 1п4ехо значение -1, т.е. если полученное значение отлично от -1, то под- 
строка ‘ТЕ 5' в переменной ча найдена и модель браузера определена. Если подстро- 
ка найдена, то в документ записывается элемент ІМК с нужным именем таблицы сти- 
лей — строка аосимейе .игтее (1+'1е5'+с). При этом запись формируется из трех 
частей: первая сохранена в переменной 1, вторая и есть название таблицы стилей, 
а третья — окончание записи, сохраненное во второй вспомогательной переменн. Й с. 
В результате работы этого сценария к документу подключится нужная таблица стилей. 


Управление видимостью и переполнением блоков 


В спецификации С$$ 2 есть несколько свойств, позволяющих управлять блоками, в ча- 
стности их видимостью и поведением при переполнении, когда размеры содержимого бло- 
ка превышают размеры самого блока. 


Свойство м5ЮИЙу 


Как следует из названия, это свойство управляет видимостью блока. Оно может при- 
нимать только два значения: 
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е уіѕір1е — обычное состояние блока (по умолчанию), когда он нормально виден 
на экране; 
• Һһіадеп — блок становится прозрачным, т.е. невидимым. 


Пример работы этого свойства мы рассматривали выше в сравнении с работой свойства 
аіѕр1ау:попе. Как вы помните, главное отличие в том, что при объявлении ді ѕр1ау:попе 
блок полностью удаляется со страницы, тогда как объявление уіѕіһі1ібу:һіддеп делает 
его просто невидимым, но место на странице под блок резервируется. 

С помощью свойства уіѕірі1і су можно организовать раскрывающиеся (дгор-йомп) 
меню. Пример такого меню можно увидеть в любой программе Міпӣомѕ, когда, щелкнув 
на имени меню, вы видите перечень доступных в нем команд. Для организации такого 
рода меню используется понятие слоя. 

Слой в С$5$ — это аналог слоя в графическом редакторе. Слой задает пространствен- 
ную (по оси 7) координату блока при помощи свойства 2-іпдех. 

Для организации раскрывающегося меню обычным образом создается главное меню 
сайта, а все его подменю помещаются на отдельные слои. Порядковый номер слоя опреде- 
ляется свойством 2-іпадех. В начальном состоянии видимость всех этих слоев. устанавли- 
вается как уіѕірі1ібу:Һіадеп. Когда пользователь щелкает на команде главного меню, 
то включается видимость нужного слоя — с помощью объявления уіѕірі1ібу:уіѕір1е. 
В результате подменю появляется на экране поверх основного содержимого сайта. Повтор- 
ный щелчок на команде меню снова отключает видимость подменю. 


Свойство омегЙо\м 


При рассмотрении вопроса о том, как будет вести себя блок, когда его содержимое 
будет превышать размеры самого блока, мы опытным путем установили, что есть две мо- 
дели поведения браузеров. 

В браузерах фирмы Місгоѕоћ блок растягивается, чтобы вместить в себя содержимое 
блока полностью, а в браузерах Орега и МогИа содержимое перекрывает блок (рис. 15.23). 


должна быть 


равна 100 
пикселей. Что 
произойдет 

если туда 

поместить 
оченьдлинноеслово? 


Рис. 15.23. Содержимое перекрывает блок 
по ширине 


296 Часть И. С55 


Случай, когда ширина блока превышается содержимым, имеет место довольно часто, 
имы его уже обсуждали. Для предотвращения подобных ситуаций нужно просто контро- 
лировать ширину объектов, помещаемых внутрь блока, и аккуратно пользоваться нераз- 
рывными пробелами. 

Не менее интересно поведение блоков и в том случае, когда содержимое не помеща- 
ется по высоте. Как можно контролировать такую ситуацию? 

В С$$ 2 появилась возможность несколько улучшить управление подобной ситуацией 
с помощью свойства охегЕ1 ом. Оно может принимать четыре значения: уіѕір1е, һіадеп, 
зско11 и аџсо. Давайте разберем их подробнее по отдельности. 


Значение мыые 


При использовании этого значения содержимое, превышающее размеры блока, 
должно перекрывать блок и оставаться видимым на экране. 

Для начала смоделируем такую ситуацию: создадим небольшой по размерам блок 
(ключевым здесь будет именно ограничение высоты блока, а не ширины) и поместим 
внутрь него фрагмент текста, превышающий размеры созданного блока. 
<5тҮіЕ> 
#ата11{ 

Бокдег: 1рх доЕке #660033; 

радайта: 0.5ет; 

Ћеісће:60рх; 

міаеһ: 150рх; 

оуег#10м: уівіБ1е; 


</5ТУЪЕ> 


<0Іу Ір="вта11"> 

Ширина данного блока 150 пикселей, а высота 60 пикселей. Проверим, удастся ли 
контролировать ситуацию с переполнением? 

</01У> 


Что же в этом случае мы увидим в окне браузера? Как показано на рис. 15.24, браузер 
Іліегпес Ехріогег при вертикальном переполнении поступает так же, как и поступал до 
этого, т.е. не обращает внимания на объявление оуег 10и: уіѕір1е. Он просто рас- 
тягивает сам блок, чтобы содержимое поместилось полностью. Браузеры Орега и МохШа 
ведут себя в соответствии с объявлением оуегє10ои: уіѕіБ1е (так же, как вели себя 
и до этого). Это происходит потому, что значение оуег1ом: уіѕіБ1е является значе- 
нием по умолчанию, 


{ Шарина дажного | Ширина данном. | 


лока 150 пикселей, блока 150 пикселей, а | 
высота 60 пикселей | высота 60 пикселей 
1 Проверим, удастся \ Проверим, удастся 
1 ли контролировать ли контролировать 
} ситуацию с ситуацию с 
перекрыванием? |! перона 
меге ЕхрЮгег. Орега н Мола 


Рис. 15.24. Содержимое переполняет блок по 


высоте 
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Значение һіддеп 


Такое объявление предписывает браузеру обрезать содержимое, которое превышает 
размеры блока, и при этом никакого механизма доступа к скрытой информации 
(например, полосы прокрутки) пользователю не предоставляется. Реальная полезность 
такого значения совершенно непонятна, зачем же писать текст, если пользователь не 
сможет его прочитать? Самое забавное, что во всех браузерах такое объявление работает 
одинаково (рис. 15.25). 


1 Ширина данного 
блока 150 пикселей, а 

| высота 60 пикселей 

ытта ансат 


Рис. 15.25. Лействие свой- 
ства оуег#10ои: Һіадеп 


Значительно лучше, если бы в случае переполнения автоматически появлялась полоса 
прокрутки или предоставлялась какая-либо другая возможность просмотреть скрытый 
текст. Именно такую возможность предоставляет следующее значение. 


Значение сгой 

При таком объявлении блок снабжается полосами прокрутки — горизонтальной 
и вертикальной. Пользователь сможет просмотреть скрытое содержимое, прокрутив его от 
начала до конца. Посмотрим, как такое объявление обрабатывают браузеры (рис. 15.26). 
Как видите, в указанных версиях браузеров все хорошо работает. Исключение составляют 
только браузеры Орега младших (5 и 6) версий — в них это объявление отображается так. 
же, как и оуегЕ1ом: Һідаеп, т.е. полос прокрутки не появляется. 


меги Ехлюнег 55 


Ширинаданного “ 
блока 150 Орега 7.5 


пикгелей аяыгота 


‹ О 


Ширина данного 4 
‘блока 150 


8 зве, 


аре Мол 


Рис. 15.26. Свойство оуег#1ои: ѕсго11 
и его действие в разных браузерах 


Значение аиїо 

При таком объявлении требуется лобавление к блоку только тех полос прокрутки, ко- 
торые действительно необходимы. Если содержимое не помещается по ширине, появля- 
ется горизонтальная полоса прокрутки. если блок маловат по высоте — вертикальная. 
Возможно появление и обеих полос прокрутки одновременно, если блок оказался мал 
в обоих направлениях. 
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В младших версиях Орега это объявление работает с ошибкой — блок отображается 
так же, как при объявлении оуегҒ1оу:уіѕір1е. Однако в последних версиях Орега эта 
проблема устранена, что не может не радовать нас, поскольку объявление поддерживает- 
ся всеми остальными ‘браузерами, и мы можем свободно им пользоваться. 

Давайте подумаем, в каких случаях нам могут пригодиться значения зско11 и ацсо 
свойства оуег 10м? Честно говоря, мне не попадались еще сайты, где бы использова- 
лись эти значения, но, очевидно, их сфера применения там, где нужно сэкономить место 
на экране. 

Гипотетически можно предположить такую ситуацию: требуется ‘создать каталог това- 
ров, причем все товары должны быть представлены на одной странице. При этом важно, 
чтобы рядом с каждым изображением товара имелась как можно более подробная инфор- 
мация о нем. Обычно в таких каталогах товаров или продукции есть краткое описание, с 
которого посетитель может перейти на отдельную страницу, посвященную этому виду това- 
ра. Но с помощью объявления оуегЕ1ом: аџсо эти подходы можно объединить. 
<5ТУБЕ> 
#девсгіре{ 

Богӣег:1рх ѕо1іа #660033; 

тагдіп:20рх 10рх; 

„бет; 


этаЕВ:350рх; 
оуегЕ1ом:аиво; 


} 
</5ТҮІЕ> 


<ІМО 5ВС="ітадез/арр1е.јро" ИТОТН="200" НЕТОНТ="210* ВОВОЕВ="О" АШІСМ="1Іеғе"> 
<РТУ Ір="девсгібе"> 

<НЗ>Яблочко< /НЗ> 

В блок <ЕМ>#4евск1Ье</ЕМ> может быть помешено довольно длинное описание това- 
ра, продукта или просто картинки, размещенной слева от него. В нашем случае 
это замечательное, спелое наливное яблочко, которое так и хочется съесть! 
Жаль, что нельзя отвлекаться, поскольку мы изучаем очень важную тему — 
"Блоковая модель С55". 

</0ту> 


В этом примере есть изображение, добавленное при помощи элемента ІМС, и задано 
обтекание при помощи атрибута АГТСМ= "1еЕЕ". Таким образом, наш блок с описанием 
должен располагаться справа. Для блока с описанием заданы высота, ширина, отступы, 
поля, границы и, самое главное, свойство оуегЕ1о\м: аџсо. Так что внутрь этого блока 
мы можем поместить абсолютно произвольный фрагмент текста, даже с использованием 
других элементов НТМІ.. Так, в нашем примере мы добавили туда заголовок и выделили 
название блока #дезск1Ъе. Что же мы увидим в результате в браузере? Как представят 
этот код браузеры Іпѓегпеі Ехрюгег и Мо2Ша, показано на рис. 15.27. Как видите, текст 
внутри блока можно спокойно прокручивать. 

Однако браузер Орега все-таки имеет проблемы с этим свойством, даже в последних 
версиях 7.х. Как поведет себя Орега, показано на рис. 15.28. Свободное место под рису- 
нок как будто бы оставлено внутри блока, но при этом рисунок вместе с блоком не про- 
кручивается, потому как находится за его пределами. В общем-то, рационально объяс- 
нить такое поведение сложно, но факт странной работы браузера Орега налицо. 
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В блок #евелье может быть помещено 
довольно длинное описание товара. продукта 
или просто картинки, размещенной слева от. 
него В нашем случае, это замечательное, спелое 
наливное яблочко, которое так и хочется съесть! 
Жаль что нельзя отвлекаться, поскольку мы 


Рис. 15.27. Обработка свойства оуегҒ1ою:аџёо в браузерах [иете 
Ехрюгеги Мозга 


у Яблочко 


В блок бевстђе Так будет выглядеть код вначале: 
может быть 


помещено довольно 
длинное описание 
товара, продукта или _ 


помещено довольно А] 
длинное описание 


Так будет работать прокрутка 


Рис. 15.28. Неверная работа прокрутки в браузере Ореға 7.5 при указании 
свойства оуегЕ10и: аиЕо 


Блоки и таблицы 


В завершение разговора о блоках нельзя не сказать о том, как в С$$ создаются табли- 
цы. В стандарте С$$ 2 появились новые группы значений для свойства аі ѕр1ау, позво- 
ляющие реализовать таблицы. Принципиально они ничем не отличаются от таблиц, соз- 
даваемых в НТМЕ, и практически каждому значению соответствует эквивалентный эле- 
ментв НТМІ. Их сравнительное описание приведено в табл. 15.3. 
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Таблица 15.3. Сопоставление элементов описания таблиц в С55 2 и НТМІ. 
Значение свойства іѕріау Элемент НТМ Назначение 


тар1е ТАВГЕ Определяет элемент как таблицу блокового 
уровня 

іп1іпе-ёар1е Нет Определяет таблицу как элемент строкового 
уровня 

баһе-гом ТВ Определяет элемент как строку таблицы 

каБЛе-ком-дкоир твору Определяет элемент как группу строк таблицы 

гар1е-ћеайег-огоцр ТНЕАБ Определяет элемент как группу строк верхней 
шапки таблицы 

Сар1е- Ғообег-сгоџр ТғООТ Определяет элемент как группу строк нижней 
шапки таблицы 

баЬ1е-соїштп соі, Определяет элемент как столбец таблицы 

Сар1е-соїшт-дгоцр СОГСВООР Определяет элемент как группу столбцов таб- 
лицы 

бар1е-се11 тн, тр Определяет элемент как ячейку таблицы 

таБ1е-сарЕ1оп САРТТОМ Определяет элемент как заголовок таблицы 


Как видите, аналогия практически полная, только большого значения это не имеет, 
поскольку создавать таблицы с помощью НТМЕ проще, чем при помощи С$5. Кроме 
того, все эти значения свойства 81 ѕр1ау не поддерживаются браузером Ниегпе! Ехріогег 
и поэтому не могут иметь широкого применения. 

Тем не менее приведем пример, как с помощью С$$ создать таблицу. Создается 
структура вложенных блоков, каждому из которых соответствует С$$-правило, описы- 
вающее его поведение. В нашем примере ограничимся очень простой таблицей, состоя- 
щей из двух строк и двух столбцов. 
<6түгЕ> 

аре 

Богдег:1рх ѕоііа #000; 
аівріау: бае; 

} 

853% 

Богаег:1рх ѕо1ід #000; 
азврлау:Еаь1е-гом; 

} 

са( 

Ъогӣег:1рх 50114 #000; 
аівр1ау:бар1е-се11; 
радділо:5рх 

} 

</5ТҮІЕ> 


<рІу с1аѕз="сар1е"> 
<Іу с1аѕѕ="Ег"> 
<ОТУ с1азз="Еа">ЕаЬ1е-се11</рт\у><РТ\У с1аѕв="са">бар\е-се11</0Іу> 
</01ү> 
<0Ту сЛазз="ек“> 
<0ІУ с1аѕз-="са">саріе-се11</0Іу><рту с1азѕ="ба">баріе-се11</0ту> 
</0ту> 

</01Іу> 
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Браузеры при обработке этого кода отобразят картинки, показанные на рис. 15.29. 
Согласитесь, что с помощью элементов НТМІ. таблицы создавать проще и привычнее. 
Да и скорее все-таки таблицы относятся к структуре документа, чем к визуальному 
оформлению, если рассматривать их с точки зрения упорядочения информации в виде 
таблицы, ане как средство верстки и позиционирования элементов. 


асте Схрокг 6 


Рис. 15.29. Таблицы, созданные средствами С$5 


Прежде чем приступить к изучению способов позиционирования и верстки МеБ- 
страниц без помощи таблиц, следует уделить внимание одному вопросу — разрешению 
конфликтов границ в ячейках таблицы. 


Разрешение конфликтов границ 


Для различных ячеек, строк или даже групп строк или столбцов таблицы с помощью 
свойств С$$ могут быть описаны различные границы. Границы смежных ячеек при этом 
могут различаться по толщине, стилю и цвету. 

Понятно, что вы не стансте расцвечивать границы таблиц во все цвета радуги и будете 
придерживаться какого-то определенного стиля оформления, единого для всей таблицы. 
Но тем не менее нельзя исключить возможности возникновения конфликта. Если он все 
же возник, можно использовать два различных механизма его устранения: режим разре- 
шения конфликтов и разделение границ. Используемый механизм определяется свойст- 
вом Богаег-со11арзе, которое допускает два значения: 


• со11арзе — включается режим разрешения конфликтов; 


е зерагаке — между ячейками таблицы добавляется расстояние, чтобы каждая 
граница отобразилась отдельно от соседней, в результате чего конфликт просто не 
возникает. 


Механизм разрешения конфликтов представляет собой правило обработки кон- 
фликтных ситуаций с границами. Правило, согласно которому границы отображаются на 
практике, гласит следующее: для каждой границы ячейки выбирается тот стиль оформ- 
ления, который более других “бросается в глаза”, за исключением тех случаев, когда ис- 
пользуется тип һі адел, который отключает границу в любом случае. Ниже перечислены 
принципы, на основании которых принимается решение, какой жс из стилей границы 
будет более предпочтительным. 
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• Границы, для которых указано значение Һіддеп для свойства Богдег-зеу1е, 
имеют наибольший приоритет для всех конфликтующих границ. Граница с таким 
значением подавляет любые другие стили. 

~ Границы со значением стиля попе имеют наименьший приоритет. Граница не будет 
отображаться, только если значения стилей всех границ, попавших в конфликт, бу- 
дут равны попе. Не забывайте, что значение попе используется по умолчанию. 

• В том случае, когда среди конфликтующих границ нет ни одной, стиль которой 
определен как һідаег, и стиль по крайней мере одной границы отличен от попе, 
более толстые границы имеют преимущество над менее тонкими. Если несколько 
границ имеют одинаковую ширину, тогда приоритеты расставляются в зависимо- 
сти от стилей границы в следующем порядке: дооџЬ1е, 50114, даѕћеа, доссед, 
гідде, оцезес, дкооуе и самый низкий приоритету стиля границ іпѕес. 

® Если стили границ отличаются только цветом, то стиль ячейки имеет высший 
приоритет над стилем строки, приоритет стиля строки выше, чем группы строк. 
Приоритет столбца выше приоритета группы столбцов, и, соответственно, при- 
оритет стиля групп строк и столбцов выше приоритета стиля всей таблицы. В ре- 
зультате появляется возможность определить, какой цвет использовать для границ 
одного стиля, если они вступят в конфликт. 


Рассмотрим конкретный пример. 


<ЭТУЬЕ> 
ТАВЫЕ{ 


тр 


то. 


тр. 


Ъогдег-со11арве: со11арве; 
Ъогдег: 5рх ѕо1ій уе11о\; } 


Ъогӣег: 1рх в0114 геа; 
радазта: 1єт; } 

Бше ( 

Ъог4ег: 5рх давней Ь1џе; } 
агееп ( 

Богдег: 5рх ѕо11а дхееп; } 


</5ТУЦЕ> 


<ТАВЬЕ> 
<ТЕ> 


<ТО>Ячейка 1</ТО> 
<ТР>яЯчейка 2</Т0> 
<ТР>Ячейка 3</Т0> 


</тв> 
<тв> 


<тр>Ячейка 4 </Т0> 
<ТО славв="Ь]ме">Ячейка 5</Тр> 
<ТО с1авз="отееп">Ячейка 6</Тр> 


</ТВ> 
<тв> 


<ТО>Ячейка 7</Тр> 
<тр>Ячейка 8</То> 
<тр>Ячейка 9</тр> 


</ТВ> 
</ТАВЬЕ> 


Этот код будет представлен в различных браузерах так, как показано на рис. 15.30. 


Как видите, браузеры Мо7Ша и Орега работают в полном соответствии с описанной ин- 


струкцией, браузер же Іпіегпеї Ехрюгегей по непонятным причинам не подчиняется. По- 


этому будьте особенно аккуратны при задании различных стилей для соседних ячеек 


в таблицах. Наверняка, они будут совершенно по-разному выглядеть в разных браузерах. 
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Ячейка 3 


Ц 1 ячейкаб мете Ехрюгсг 


Ячейка 7 Ячейка 8 Ячейка 9 


Ячейка] | Ячейка2 | Ячейка 3 


С ЕЕ5 


Ячейка4 Ё Ячейка 5 Ореги Мога. 


Ячейка7 | ЯчейкаВ | Ячейка9 


Рис. 15.30. Обработка конфликтов границ в разных 
браузерах 


При указании свойства Богдег-со11арѕе: ѕерагабе ячейки таблицы будут разде- 


лены и их границы не будут пересекаться. Если в нашем примере немного изменить пер- 
вое С$5-правило; · 


ТАВЬЕ( 
Ъогӣег-со11арве: верагабе; 
Ъокаег: 5рх ѕо1іа уе11ом; ) 


то в браузере код будет представлен так, как показано на рис. 15.31. 


| жевьт | девка | жеж 


Ячейка 3 


| Ячейка 4 Ячейка 5 


Ячейка 7 | Ячейка 8 


Ячейка 9 | 
= = 


Рис. 15.31. Использование варианта раз- 
деления границ 


Примечательно то, что в этом случае все браузеры будут работать одинаково. Можно 
сказать, что этот эффект довольно интересен и, возможно, пригодится в том случае, ко- 
тда потребуется для каждой ячейки таблицы нарисовать уникальную границу. 
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Глава 16 


Схемы позиционирования и слои 


В этой главе... 


Позиционирование блоков 
Нормальный поток 
Свойство роз ют. 
Фиксированные блоки 
Плавающие блоки 

Слои в С$5 


чжиту\ 


Позиционирование блоков 


По своей сути идея позиционирования блоков в С55 довольно проста. После того как 
созлан блок и заданы его свойства, необходимо определить его положение в окне браузе- 
ра или на печатной странице, — в общем, на любом устройстве вывода информации. 
В этой главе будем подразумевать в качестве такого устройства вывода экран монитора, 
хотя принципиально это значения не имеет. 

В общем виде положение блока на странице будет зависеть от нескольких параметров. 
Ключевую роль здесь, пожалуй, будет играть выбранная схема позиционирования, пред- 
ставляющая собой алгоритм, согласно которому определяется положение блоков на 
странице. Схемы позиционирования бывают четырех видов. 


1. Нормальный поток. 

2. Относительное позиционирование. 
3. Абсолютное позиционирование, 

4. Плавающая блоковая модель. 


Кроме того, важную роль играет само расположение блоков в коде документа. К это- 
му вы должны были уже привыкнуть, поскольку порядок записи элементов в коде, как 
правило, соответствует порядку их вывода на экран (с учетом порядка вложенности). 
В С55 для позиционирования порядок записи в коде несуществен только для блоков, по- 
зиционируемых ‘абсолютно. А в нормальном потоке положение элементов в коде полно- 
стью определяет внешний вид документа, так же как в НТМ!.. 

Следует отметить, что параметры устройств вывода также играют немаловажную 
роль, — например, размер и разрешение экрана монитора. Все \У/еб-разработчики давно 
привыкли адаптировать свои работы к минимальному разрешению 800х600, но с появле- 
нием мультимедийных мобильных телефонов, с которых также стало возможным про- 
сматривать не МАР, а обычные УеБ-страницы, ситуация усложнилась. Конечно, таких 
пользователей пока немного, но со временем их количество. будет расти, однако не следу- 
ет ожидать, что экраны мобильных телефонов будут сколько-нибудь заметно увеличи- 
ваться. Видимо, скоро перед разработчиками встанет новая задача — адаптировать сайты 
и под миниатюрные экраны мобильных телефонов. 


Так, если вы рассчитывали, что вашу \\еБ-страницу будут смотреть на разрешении 
1024х768, то в лучшем случае появится полоса прокрутки, а в худшем может “расползтись” 
весь дизайн. 

Схемы позиционирования в С$$ принципиально отличаются от принципов позицио- 
нирования в языке НТМІ.. В НТМЕ для позиционирования используется искусственный 
прием — таблицы, которые имеют как преимущества, так и недостатки. Главное преиму- 
щество таблиц в том, что они позволяют довольно легко позиционировать элементы, рас- 
полагая их в ячейках таблицы. К таблицам за много лет уже привыкли, хорошо изучили их 
особенности и написали много книг, позволяющих освоить табличную верстку в приемле- 
мые сроки. С таблицами мало проблем, они практически одинаково отображаются всеми 
браузерами, и при их использовании не приходится писать кроссбраузерный код. 

К недостаткам таблиц можно отнести сложность и нелогичность табличной верстки. 
Часто элементы, которые логически относятся к одной структурной единице документа, 
располагаются в разных ячейках или даже таблицах, что затрудняет восприятие такого 
кода. Кроме этого, сам код часто нельзя назвать компактным, и таблицы медленно ото- 
бражаются браузерами. Но, пожалуй, главный недостаток в том, что при использовании 
таблиц для верстки смешиваются структуры документа и его содержимое, и для того что- 
бы изменить структуру документа, приходится частично или полностью переписывать 
его код. 

Уже достаточно опытным Меб-разработчикам иногда довольно трудно переключить- 
ся с таблиц на С$$-позиционирование, — чаще всего потому, что они уже привыкли ду- 
мать терминами табличной верстки. В этом смысле новички УМеб-дизайна находятся 
в более выигрышном положении, поскольку табличные стереотипы у них еще не прижи- 
лись и новые возможности позиционирования средствами С$$ им усвоить проще. 

Как считают многие, будущее именно за С5$-позиционированием (иначе его назы- 
вают СЅ8Р), хотя и оно не лишено своих недостатков. Почему же все-таки делают ставки 
на С$5Р? Во-первых, СЅЅР поддерживает идею разделения структуры и визуального 
оформления документов. Все больше и больше сайтов создается на основе баз данных, 
и \еЬ-страницы формируются динамически по запросу пользователя на основе опреде- 
ленных шаблонов. С появлением С5$ вообще и СЅ$Р в частности стало возможным соз- 
‘давать шаблоны документов, а затем, изменив только лишь таблицу стилей, полностью 
менять дизайн сайта. При этом можно изменить даже положение блоков, а не только их 
оформление, вовсе не внося каких-либо изменений в код страницы. Кроме того, создан- 
ный подобным образом код страниц значительно меньше по объему и логичнее по своей 
‘структуре. Его проще читать и редактировать. 

Одним из главных препятствий на пути С$$-позиционирования является неодинако- 
вая поддержка этой технологии браузерами. Здесь, конечно, решающую роль играет по- 
пулярность определенных браузеров среди пользователей. Поскольку браузеры. хорошо 
поддерживающие С88 (такие, как Орега и Моа), пока недостаточно широко распро- 
странены, приходится ориентироваться на самый популярный браузер Ииегпе! Ехрюгег 5 
и 6, который множество возможностей С$$ поддерживает хуже, чем другие браузеры. 

Ну и последнее: не каждый макет, который может представить таблица НТМ\., можно 
сверстать при помощи С$$, но, используя несколько хитростей, эти ограничения можно 
обойти. Или же можно внести незначительные изменения в дизайн, — так, чтобы его 
можно было полностью сверстать средствами С$$. Итак, приступим к рассмотрению са- 
мой простой схемы позиционирования, которой является нормальный поток. 
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Нормальный поток 


Позиционирование в нормальном потоке осуществляется по простой схеме. Все 
структурные и строчные блоки отображаются в окне браузера сверху вниз, по вертикали 
втом порядке, в каком они следуют друг за другом в НТМІ -коде. При этом два струк- 
турных блока никогда не могут располагаться на одной горизонтальной линии. Немного 
иначе дело обстоит со строчными блоками — браузер располагает их по горизонтали, 
друг за другом. Такая строка называется линейным блоком, и несколько строчных бло- 
ков могут быть помещены в один линейный. Если для строчного блока места не хватает, 
то он переносится в следующий по вертикали линейный блок. 

По своей сути нормальный поток ничем не отличается от позиционирования в чистом 
языке НТМІ.. Если некий элемент расположен в коде раньше другого, то и на странице 
он будет нахолиться ближе к верху страницы, чем следующий за ним. 

С помощью нормального потока невозможно реализовать сложную верстку, если не 
использовать НТМі -таблицы. Без таблиц мы можем немногое, но, тем не менее, создать 
простую МеЬ-страницу, дневник оп-Йпе или просто оформить некий перечень, напри- 
мер, статей или публикаций, вполне можно. Иначе говоря, при использовании схемы 
нормального потока мы можно реализовать структуру из следующих друг за другом свер- 
ху вниз элементов, размещаемых в одну колонку. 

Приведем небольшой пример. В последнее время все чаще встречаются домашние 
страницы пользователей, оформленные как дневник оп-Нпе. Чаще всего такие страницы 
создают люди, которые находятся далеко от своего дома, — например, те, кто уехал за гра- 
ницу учиться или работать. Чтобы родственники могли быть в курсе их дел, они ведут 
дневник и публикуют его в Ме. 

Структура таких домашних страниц такова, что в них нет большого количества разде- 
лов. Как правило, это собственно сам дневник, фотоальбом и гостевая книга, чтобы 
иметь обратную связь с посетителями. Структура самого дневника еще проше — это дата 
и текстовый блок, описывающий приключения и события этого дня. Каждый новый 
день помещается в начало страницы, чтобы не пролистывать ранее прочтенные части 
дневника, прежде чем добраться до новых записей. 


Центрирование в нормальном потоке 


При верстке в олну колонку ее чаще всего на странице центрируют. Однако центри- 
рование в С$$ не так просто реализовать, как кажется на первый взгляд. Свойство бехе – 
а119п:сепеех, к примеру, должно центрировать содержимое блока, но не сам блок от- 
носительно контейнера. 

‘Создадим простой блок шириной 300 пикселей с тонкой черной рамкой и попробуем 
его отцентрировать средствами С$$. 

ФБТоск { 

Богаег: 1рх Маск 50114; 

Сехі-а1ідп: сепсег; 

міасњ: 300рх; 

} 


рту і8="Ы1оск"> 
Хотелось бы отцентрировать не содержимое этого блока, а весь блок целиком. 
</рту> 

При этом, если пользоваться свойством сехе -а1ісп: сепеех, сам блок будет распо- 
лагаться у левого края окна, а отцентрирован будет текст внутри блока. Нам же необхо- 
димо, чтобы текст оставался выровненным по левому краю, а блок центрировался. Как 
же это осуществить? 
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Самое время вспомнить о значении ацЕо свойства тагаіп. По спецификации С$$, 
как вы помните, для значения або размеры полей вычисляются особым образом. Так 
вот, если для элементов уровня блока в нормальном потоке оба свойства тагосіп-гісћі 
имага1п-1е Е принимают значение ацсо, то их вычисляемые значения будут одинаковы. 

Что это значит для нас? Когда левое и правое поля будут совпадать? Когла блок цен- 
трирован! Именно этого мы и добивались, нетак ли? Перепишем правило для блока. 


#Лоск { 
Богӣег: 1рх Ь1аск ѕо1ій; 
пагдіп-гідһе: ацео; 
пагдіп-1еѓс: аџсоғ 
бехі-а1ісп: 1626; 
міасһ: 300рх; 


Эту запись можно оптимизировать, убрав значения по умолчанию (сехс-а1ісп: 
1еғс) и воспользовавшись стенографическим свойством тагаіп. Результат наших уси- 
лий представлен на рис. 16.1. 

#1оск { 

Ъогаег: 1рх БЬ1асК во1іа; 

пагдіп: 0 ато; 

міаеһ: 300рх; 


готелесь бы отцентрировать не 
одержимое этого блока, а весь блок 


еликом. 


Рис. 16.1. Блок, отцентрированный средствами С55 


Пример верстки в нормальном потоке — дневник оп-!пе 


Теперь можем перейти к созданию МеБ-дневника. Верстаться он будет в одну колонку 
шириной 80% от ширины экрана, которая будет отцентрирована. Сама страница будет 
состоять из нескольких частей. Первым илет заголовок страницы, под которым будут 
размещаться ссылки на другие разделы сайта. Их может быть произвольное количество, 
но ранее мы оговаривали следующие: собственно сам дневник, фотоальбом и гостевая 
книга. Далее будет идти блок записей дневника. Наконец, в завершение страницы будет 
отображаться почтовый адрес автора дневника, чтобы читатели знали, как с ним связать- 
ся напрямую. 

Параметры шрифта и фон страницы зададим сразу — в правиле для селектора ВОрү, 
чтобы все остальные элементы на странице унаследовали эти значения. 
ворү( 

Ъаскогоџпа: #ЕРЕ; 


со1ог: пауу; 
опе: 0.Веп Таһопа, ѕап-ѕегіё 


Создадим главный блок шириной 809, обведем его серой границей в 1 пиксель и от- 
центрируем. 
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:1рх гау зо11а; 
аџсо; 
міасњ:80%; 


В НТМІ.-коде конструкция будет следуюшей: 
<вору> 

<рту ій="шаіп"> 

</юту> 
</вору> 

Как вы понимаете, все остальные блоки дневника будут помещаться внутрь блока 
таіп. Первый такой блок будет содержать заголовок, т.е. название сайта. Назовем этот 
блок ћеаа. Текст в нем будет написан шрифтом гораздо большего размера, чем на ос- 
тальной части страницы. Кроме того, сделаем для заголовка темно-серый фон, а цвет 
текста выберем белым — для большего контраста. Заголовок отцентрируем. 


ЧТеаа { 
раскаӯгоџпа: #АЅАЅАЅ5; 
со1ок: НЕРЕ, 
Ёопс-віғе: 2.5ет; 
Сехр-а1ідп: сепёег; 


После этого НТМІ -код страницы станет таким: 
<ворү> 

<ЮІУ ід="таіп"> 

<0ту ій="Һеад"> 
Оп-1іпе дневник Ивана Куприна 

</0ту> 

</рту> 
</вору> 


Следующий блок ссылок 11пК5 сделаем на более светлом фоне. В нем по центру бу- 
дут располагаться ссылки на остальные разделы сайта. 
Жатка ( 

Ъаскакоциа: #ЕрЕрЕР; 

рааайта: 2рх 0; 

сехе-а1ідп:сепсег 


Для того чтобы текст не прилегал вплотную к границе главного блока и к блоку заго- 
ловка, в правиле заданы отступы: по 2 пикселя сверху и снизу блока. Текст центрируется, 
поэтому отступы по бокам можно не задавать. Если бы мы оставили выравнивание текста 
по левому краю, тогда следовало бы создать небольшой отступ слева. 

Для разделения ссылок друг от друга воспользуемся символами неразрывного пробела 
и вертикальными линиями. Кроме того, хотелось бы избавиться от подчеркивания 
в ссылках, а также оформить их черным полужирным шрифтом. Для этого напишем пра- 
вило с контекстным селектором, чтобы оно затрагивало только ссылки этого блока. 
#1іпкв А( 

со1ог:#000; 

ҒопЕ-меісће: Ьо1а; 

бехс-десогабіоп: попе; 


НТМЕ-код на этом этапе будет выглядеть следующим образом: 


<ВОрҮ> 
<0ІУ ід="таіп"> 
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<ртУ ід="Һеад"> 
Оп-1іпе дневник Ивана Куприна 
</рту> 
<0гу ій="1їпка"> 
<А НЕЕЕ="#">дневник</А>&пЬвр; | |&пЬвр; 
<А НВЕЕ=“#">фотографии</А>&пЪзр; | | &пЬѕр; 
<А НВЕР="#“>гостевая книга</А> 
</рту> 
</рту> 
</ворү> 


Подведем промежуточный итог — уже записанный нами код в браузере булет отобра- 
жен так, как показано на рис. 16.: 


невник 


| ` дневник |1 Фотографии || гостевая кыа. 


Рис. 16.2. Промежуточный результат: созданы блок заголовка и ссылки 


Далее должен следовать блок новостей. Для него следует задать отступ 0.5ем слева 
‘и справа, чтобы текст выглядел аккуратно и не прилегал вплотную к границе главного блока. 


#пемв { 
радаіпс:0рх 0.5ет; 


Далее в НТМ!--код вносим сам текст новостей в обратном хронологическом порядке: 


<ворү> 
<0ІУ ід="паіп"> 
<0гу ід="Һеаа"> 
Оп-1іпе дневник Ивана Куприна 
</0ту> 
<0ту ід="1іпкє"> 
<А НВЕЕ="#">дневник</А>&пЪзр; | | &пЪзр; 
<А НВЕЕ="#">фотографии</А>ё&пЬвр; | | Пр; 
<А НВЕР="#">гостевая книга</А> 
</01У> 
<0ІУ ід="пемв"> 
<Р><В>21 июня 2005г.</В><ВВ> 
Сегодня в дневнике появилась первая часть фотографий. Посмотреть их можно 
в <А НВЕР="#">фотоальбоме</А>.</Р> 
<Р><В>9 мая 2005 г.</В><ВЕ> 
С днем Победы! Великий праздник, особенно для наших дедов и прадедов.</Р> 
<Р><В>1 мая 2005 г.</В><ВЕ> 
"Мир, труд, май!" Первый день мая всегда больше располагает к отдыху и 
развлечениям, чем к труду. Парадокс праздника.</Р> 
</рту> 
</рту> 
</вору> 


Последний штрих — подпись в конце страницы с адресом электронной почты. Назо- 
вем этот блок Еоокег. Такой же светло-серый фон, как и у блока ссылок, отступы для 
текста и центрирование — вот и все параметры для него. 


#єсогег ( 
Баскагоцла: #ЕРЕРЕО; 
рааата:2рх 0; 
Бехі-а1ісп:сепёег; 


И добавим сам блок в НТМІ -код: 
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“Веаа"> 
Оп-1іпе дневник Ивана Куприна 

</оту> 

«рту іб="1їпкв*> 

<А НЕЕЕ="#">дневник</А>ёпр; | |&пЬѕр; 

<А НКЕЕ="#">фотографии</А>&прзр; | |&пЬѕр; 

<А НВЕ="#">гостевая книга</А> 

</рту> 

<0Іу 1а="пеиз"> 

<Р><В>21 июня 2005г.</В><ВЕ> 

Сегодня в дневнике появилась первая часть фотографий. Посмотреть их можно 
в <А НВЕР="#">фотоальбоме</А> .</Р> 

<Р><В>9 мая 2005г.</В><ВЕ> 

С днем Победы! Великий праздник, особенно для наших дедов и прадедов.</Р> 


<Р><В>1 мая 2005 г.</В><ВК> 
“Мир, труд, май!" Первый день мая всегда больше располагает к отдыху 
и развлечениям, чем к труду. Парадокс праздника.</Р> 
</оту> 
<0ІУ ій="Ғообег"> 
Иван Куприн. <ВВ> 
Пишите мне по адресу <А НВЕР="ша1145о:1уап@та1 1 .ка">4уап@та1 1 .ка</А> 
</оту> 
</0ту> 
</ворү> 


Окончательный вид страницы в браузере булет таким, как показано на рис. 16.3. По- 
лучилось просто и без изысков, зато логично и понятно, я налеюсь. Кроме того, такой 
шаблон легко модифицировать, чтобы получить, например, список статей, публикаций 
или любую другую конструкцию, представляющую собой любой перечень. 


Бшлытелышоссое-ьааннаа Ән 


‘дневник || Фотографии || гостевая книга 


21 июня 2005г. 


Сегодня в дневнике появилась первая часть фотографий. Посмотреть мк | 
можно в фатоэльбкекь | 


| оная зоо. 
С днем победы Вагикий праздник, особенно для наше: дедов и градедов. 


(зма 2006. 
| "Мир, труд, май!" Первьй день мая всегда больше располагает к отдыху и 
разелечениям, чем К труду. Парадокс праздника. 


‘Иван Куприн. 
Пишите мне по адресу узатпай лы 


Рис. 16.3. Окончательный вид страницы оп-Їіпе-дневника в браузере Ітетег 
Ехріоғеғ 6.0 
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Итак, нормальный поток используется браузером по умолчанию для позиционирова- 
ния блоков на странице. Но в С55 2 существует свойство роѕісіоп, которое может из- 
менить работу этого алгоритма. 


Свойство роз оп 


Рассмотрим свойство роѕісіоп, которое наряду со свойством Е1оаЕ определяет 
схему позиционирования. Свойство роз1Е1оп может принимать четыре значения, кото- 
рые соответствуют основным схемам. 


1. ѕсасіс — блок будет считаться обычным и позиционироваться в соответствии 
с правилами нормального потока. 


2. ге1асіуе — относительное позиционирование (относительно нормального потока). 
3. абзоТаее — абсолютное позиционирование. 


4. Е1хеа — фиксированное позиционирование. Блок позиционируется абсолютно, 
а потом его положение фиксируется относительно области просмотра — такой 
блок не перемещается при прокрутке. 


Как вы понимаете, значение ѕсасіс, соответствующее нормальному потоку, исполь- 
зуется по умолчанию. Подвидом нормального потока является относительное позицио- 
нирование. Рассмотрим его подробнее. 


Относительное позиционирование 


Чтобы создать относительно позиционированный блок, необходимо записать свойст- 
во роѕібіоп: ге1ае1 уе. В этом случае положение блока сначала будет вычислено отно- 
сительно нормального потока, а затем блок будет смешен относительно этого места. Сле- 
‘лующие блоки будут располагаться так, как будто исхолный блок находился в нормаль- 
ном потоке и смещения не происходило. 

Смещение задается с помощью следующих свойств: 


е 1еЕе — смещение левого края блока от левого края контейнера; 

® гісһе — смещение правого края блока относительно правого края контейнера; 

• Сор — смещение верхнего края блока относительно верхнего края контейнера; 

• Боссот — смещение нижнего края блока относительно нижнего края контейнера. 


Эти свойства применяются к позиционируемым элементам, значение свойства роѕісіоп 
для которых отлично от зсасіс. Значения залаются в единицах длины или процентах относи- 
тельно высоты (для сор и Ъобсот) или ширины (для ІеЁє и гісће) контейнера. 

Рассмотрим простой пример. Поместим на страницу три блока рту. 


рту ( 
Богӣег: 1рх доскей #000; 
} 


<БГУ>Первый блок</0гу> 
<Оту>Второй блок</рту> 
<РГу>Третий блок</ргу> 


В окне браузера они будут размещены согласно правилам нормального потока, как 
показано на рис. 16.4. 
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Рис. 16.4. Блоки размещены по правилам нор- 
мального потока 


Если сейчас изменить способ позиционирования одного из блоков, — скажем, сдви- 
нутьего на 10 пикселей от верхнего края и на 20 пикселей от левого, то картина изменит- 
ся. Для этого создадим класс поуе: 


поуе( 
роѕібіоп: ге1абіуе; 


<рту>Первый блок</рІу> 
<ОТУ с1авз="тоуе">Второй блок</рту> 
<ОТУ>Третий блок</рт\у> 

Теперь второй блок будет указанным образом позиционирован относительно своего 
прежнего положения в потоке (рис. 16.5). На рисунке четко видно, что положение первого и 
третьего блоков не изменилось. Они по-прежнему расположены так, как будто второй блок 
остался на месте и никуда не был сдвинут. Таким образом, мы на практике получили под- 
тверждение правилу, что относительное позиционирование не влияет на другие блоки, — 
сдвиг осуществляется только для самого относительно позиционируемого блока. 


Рис. 16.5. Ко второму блоку применено отно- 
сительное позиционирование — сдвиг на 10 
пикселей сверху и на 20 пикселей слева 


Практически относительное позиционирование применяется или очень редко, или 
совсем не применяется. Вряд ли потребуется наложить содержимое одного блока на 
другое, ведь нам нужно, чтобы все они хорошо читались. Кроме того, при необходимости 
положение блока в нормальном потоке можно изменить, просто задав вокруг него 
поля, — получится аналог смещения в относительном позиционировании. 
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Абсолютное позиционирование 


Если при относительном позиционировании блок не “вырывается” из нормального 
потока, а только смещается относительного нормального положения, то при абсолютном 
позиционировании все совершенно иначе: абсолютно позиционируемый блок полно- 
стью “вырывается” из нормального потока. Таким образом, внешний вид и расположе- 
ние абсолютно позиционируемого блока не зависят от того, в каком месте НТМІ -кода 
расположен код самого ‘блока. Другие элементы страницы позиционируются согласно 
собственным правилам позиционирования совершенно независимо от блока, позицио- 
нируемого абсолютно. 

Давайте рассмотрим простой пример. Возьмем три блока, как и в предыдущем приме- 
ре с относительным позиционированием. 
рту { 


Богаег: 1рх досёеа #000; 
} 


<ЮІУ>Первый блок</рту> 
<0ту>Второй блок</рту> 
<ртУ>Третий блок</рту> 


Они расположатся согласно правилам нормального потока, как показано на рис. 16.6. 


Рис. 16.6. Блоки размещены согласно правилам 
нормального потока 


Теперь второй блок позиционируєм абсолютно. Положение блока задается при по- 
мощи свойств сдвига: 

е 1еЕЕ — смещение левого края блока относительно левого края контейнера; 

• гісһће — смешение правого края блока относительно правого края контейнера; 

е гор — смещение верхнего края блока относительно верхнего края контейнера; 

® Бобом — смещение нижнего края блока относительно нижнего края контейнера. 


В комбинации со свойством роѕіёіоп:арзо1џбе эти свойства будут задавать сме- 
щение абсолютно позиционированного блока относительно его контейнера. Контейне- 
ром для него может служить только ‘абсолютно или относительно позиционированный 
блок, а также само окно браузера. 

В нашем случае контейнером для второго блока рту служит окно браузера, поэтому 
смещение будем задавать относительно окна. Запишем правило и присвоим блоку иден- 
тификатор аЪз. 
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фаьз{ 
роѕісіоп: арѕо1џсе; 
Іеѓс: 50рх; 
Сор: 100рх; 


<0Іу>Первый блок</рту> 
<0ТУ 19-"аЪз">Второй блок</рту> 
<рТУ>Третий блок</рту> 

В результате в окне браузера увидим картину, представленную на рис. 16.7. Как види- 
те, первый и третий блоки находятся в нормальном потоке и располагаются вертикально 
в порядке следования в НТМГ-коде так, как будто второго блока на странице вообще 
нет. Обратите внимание: на месте второго блока нет даже пустого пространства, как было 
в случае относительного позиционирования. 


Рис. 16.7. Второй блок “вырван" из нормального 
потока и позиционирован абсолютно 


В нашем примере второй блок, несмотря на то что в коде он расположен между пер- 
вым и третьим, в окне браузера расположен ниже их. Происходит это из-за заданного 
смещения от верхнего края окна в 100 пикселей (сор: 100рх). Кроме этого, блок сме- 
шен вправо, так как задано смещение от левого края на 50 пикселей (1е#є: 50рх). 

Даже если мы изменим НТМ!--код документа и переместим код второго блока в самое 
начало документа или любое другое место 
<Ворү> 

<0ту ій="арв">Второй блок</0ту» 

<Юту>Первый блок</рт\у> 

<Оту>Третий блок</ОГ\> 
</вору> 
то даже в этом случае внешний вид документа в браузере не изменится, поскольку поло- 
жение второго блока задается абсолютно и от места в НТМІ -коле не зависит. Это прави- 
ло справедливо для любых блоков, являющихся прямыми потомками элемента ВОРУ. 

Смещение блока, аналогичное предыдущему, можно задавать в единицах длины или 
процентах относительно высоты (для свойств Еор и Боёбот) или ширины (для свойств 
1еёс и гісће) контейнера. 


Пример верстки сайта с использованием абсолютного 
позиционирования 


Давайте рассмотрим пример верстки сайта фиксированного размера с помощью абсо- 
лютного позиционирования. Предположим, что требуется сверстать сайт, внешний вид 
которого представлен на рис. 16.8. 
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Строительная фирма "ДОМ" 


троим, производим, продаем 


Фирма "Дом" образовалась в 1998 году и с тех пор 
занимает лидирующее место на рынке строительства и 
отделочных матерналов. 

Первоначально предполагалось оказание услуг по 
строительству, ремонту квартир и сдаче помещений 
"под ключ" Но в последствие стало понятно, что 
оказание комплекса услуг по подбору строительных и 
отделочных материалов, а также сантехники наиболее 
митересно клиенту. 


Фирма "Дом? имеет .расположенныхв 
разных районах города В них вы можете найти все 
для вашего дома, начиная с отделочных материалов и 
заканчивая мебелью и аксессуарами 


Наши опытные дизайнеры помогут Вам сделать 
выбор При необходимости возможно компьютерное 
моделирование и перепланировка хпартиры 


Рис. 16.8. Внешний вид сайта с фиксированными размерами 


Легко видеть, что макет можно разбить на четыре основных блока, имеющих строение, 
показанное на рис. 16.9. Первый блок — это заголовок сайта с соответствующим графиче- 
ским изображением. Ширина этого блока 640 пикселей. Следующий (второй) блок распо- 
ложен у левого края и содержит навигационное меню сайта. Ширина блока совпадает с 
шириной изображения дома в заголовке и равна 143 пикселя. С правой стороны располага- 
ется блок (под номером 4 на рисунке), предназначенный специально для рекламных банне- 
ров размером 100х100 пикселей, кнопок и счетчиков. Для этого блока отводится 
106 пикселей: 100 на сам баннер и по 3 пикселя отступов с каждой стороны. Центральный 
блок (третий) будет содержать основной текст страниц сайта. Под него остается 391 пиксель 
из 640 пикселей общей ширины. Кроме этого, заранее известна высота первого блока. Она 
совпадает с высотой помещенного в него изображения и равна 123 пикселя. 


1 640рх 
2 3 4 
143рх 391рх 106рх 


Рис. 16,9. Примерное расположение блоков сайта 
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Итак, абсолютное позиционирование вполне применимо для верстки сайта с заранее 
известными фиксированными размерами, когда не требуется адаптация к разрешению 
монитора пользователя. Наш сайт имеет структуру, показанную на рисунке выше. В сти- 
ле для всего документа определим коричневый цвет фона ‘для всего документа. 
ворү{ 

Ъаскагоипа: #ВОАЕ92; 

} 

Первый блок содержит название сайта, слоган и графическое изображение, которые 
всумме и составляют заголовок сайта. Определим для заголовка идентификатор ћеаа 
и зададим известные нам параметры: 

#реаа{ 
Баскоагоџпа: ик] (ітадеѕ/Һоцѕе.јро) по-гереае #ЕЕЕ; 


Ћеісће:123рх; 
міасћ: 640рх; 


Блок Һеаа позиционируется в нормальном потоке, поэтому свойство роѕісіоп для него 
не залается. Задаем ширину и высоту блока, равные соответственно 640 и 123 пикселям. Изо- 
бражение дома добавляем в качестве фона, чтобы можно было поверх него написать текст, 
т.е. название сайта и слоган. Кроме этого, определяем белый цвет фона, чтобы он уже был из- 
вестен до того, как загрузится фоновое изображение. Запрещаем повторения фонового изо- 
бражения, так как оно должно присутствовать в единственном экземпляре. Этот рисунок для 
экспериментов вы можете скачать по адресу: ВЕЕР : / /млии .та1сһик.ги/ехашр1е2.2ір. 

Теперь перейдем к НТМГ--коду. Нам необходимо написать следующее: 
<ВОрү борпагдіп="0* 1еЕщакози="0" кідћотагдіп="0" Ьобсоптагдіп="0"> 

<0Іу іё="Һеаа"> 

- здесь будет код заголовка. 

</рту> 
</вору> 

Здесь необходимо сделать несколько комментариев. В открывающем теге элемента 
вору прописаны атрибуты, определяющие отступы со всех сторон от края окна браузера. 
Вместо них можно было бы в С$$-правиле для элемента ВОБУ написать следующее: 
вору { 

Баскагоипа: #ВРАР92; 

тагдіп: Орх 
} 

Но такую конструкцию игнорирует браузер Орега, и в нем все равно будут присутствовать 
отступы со всех сторон шириной примерно 5 пикселей. Явное задание отступов в НТМГ--коде 
‘избавляет нас от разночтений, и отступы будут отсутствовать во всех браузерах. 

При просмотре этого кода в окне браузера увилим только фоновый рисунок заголовка 
и основной фон страницы (рис. 16.10). 

Теперь в правом верхнем углу потребуется написать текст. В НТМІ -коде это будет 
выглядеть просто, добавим лишь два заголовка: 
<р1\ з4-="веаа"> 

<Н1>Строительная фирма "ДОМ"</Н1> 


<Н2>Строим, производим, продаем</Н2> 
</01У> 
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Рис. 16.10. В браузере пока видим только рисунок в заголовке и основной корич- 
невый фон страницы 


Необходимо также написать стиль, определяющий внешний вид этих двух заголов- 
ков, Для этого удобнее всего воспользоваться контекстным селектором, потому что заго- 
ловки такого вида у нас будут встречаться только в блоке Һеаа. Первый заголовок будет 
крупнее, второй меньше. Оба должны быть выровнены по правому краю, и, чтобы они не 
прилегали вплотную к краю контейнера, зададим для них небольшой отступ справа — 
5 пикселей достаточно. Получим такие С$$-правила: 

#һеаа н1{ 

со1ог: #333300; 

ЕопЕ: 2ет Таһота, вап-вег1; 

раддіпо-гіће: 5рх; 

Сехс-аЈісп: гідће; 


} 

#һеаа н2 { 
со1ог: #996; 
оп: 1.2ещ Таһота, ѕап-вегі; 
радаіпа-сісће: 5рх; 
шагдіп-ор:-1еш; 
Сехр-а1ісп: клаве; 


Свойство тагсіп-бор с отрицательным значением -1ем задано для того, чтобы 
уменьшить абзацный отступ между заголовками — сравните внешний вид заголовка с за- 
данным свойством тагоіп-сор и без него (рис. 16.11). 

Теперь пришло время заняться вторым блоком. В нем будут располагаться ссылки на 
разлелы сайта, т.е. навигационное меню. Определим для этого блока идентификатор теги, 
Сам блок должен быть шириной 143 пикселя. Позиционировать его будем абсолютно: 
смещение слева булет нулевым, а сверху следует отступить 123 пикселя. Запишем правило: 
#тепи{ 

Баскагошпа: #0804в2; 

розісіоп: арѕо1исе; 

ЈеЁе: 0рх; 

Сор: 123рх; 

міаєћ: 143рх; 
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Строительная фирма "ДОМ" 


Строительная фирма "ДОМ" 


Рис. 16.11. Действие свойства тагсіп- сој 
Вверху свойство задано, внизу — нет 


Нам, можно сказать, повезло в том, что мы заранее знаем высоту первого блока, так как 
она определяется высотой рисунка Һоџѕе. јр, который мы в него поместили. Поэтому 
можем точно позиционировать и второй блок (1е#с: Орх; сор: 123рх). Но и втом слу- 
чае, когда высота блока #һеаа заранее не известна, выход тоже есть. Свойства, опреде- 
ляющие смещение блоков, имеют значение аџео. В этом случае значение смещения вы- 
числяется таким образом, чтобы оно было достаточно для расположения элемента, как буд- 
то он располагается в нормальном потоке. Поэтому, если написать правило: 

#тепи{ 

Ъаскакоцпа: #0804ва; 

ровібіоп: аБзо1щее; 

ЗеЁе: Орх; 


Фор: аџбоғ 
узаЕН: 143рх; 


} 


то величина смещения от верхнего края будет вычислена автоматически, как будто блок 
#тепи располагается в нормальном потоке, т.е. непосредственно за первым блоком 
#һеаа. После того как будет вычислено смещение, блок позиционируется абсолютно, 
с вычисленным ранее смещением. 

Создадим этот блок с перечнем ссылок на разделы сайта и поместим его в НТМІ -код 


страницы: 
<01У 14="тепи"> и 
<ВВ> <!-- перевод строки ВЕ — для небольшого отступа сверху --> 


<А НКЕЕ="#">Главная</А><ВВ> 

<А НВЕЕ="#">О компании</А><ВВ> 

<А НВЕЕ="#">Продукция</А><ВЕ> 

<А НВЕЕ="#">Контакты</А><ВВ> 

<А НВЕР="#">Гостевая книга</А><ВВ> 
</оту> 


Так как этот блок позиционируется абсолютно и является прямым потомком элемен- 
та ворү, то не важно, где именно в коде страницы он будет располагаться. Тем не менее 
лучше располагать блоки в каком-либо. определенном порядке, понятном и ‘удобном вам, 
чтобы при необходимости легко найти нужный фрагмент кода и отредактировать его. 

Чтобы ссылки были оформлены в соответствии с залумкой дизайнера, необходимо 
создать С55-правило, описывающее их внешний вид. Так как эти ссылки будут особен- 
ные и использоваться этот стиль оформления будет только в пределах блока меню, опять 
воспользуемся контекстным селектором. 
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#пепи АС 
со1ог: #333300; 
Ғопе: Ьо1а 0.8ем Таһота, ѕап-ѕегіЁ; 
рааа1та-1еЁЕ: 5рх; 
бехс-десогабіоп: попе; 


В первую очередь задаем темно-коричневый цвет и свойства шрифта, Чтобы не было 
подчеркивания, задаем свойство сех -десогасіоп и присваиваем ему значение попе. 
Далее задается отступ слева в 5 пикселей, чтобы текст ссылок не прилегал плотно к лево- 
му краю. Здесь следует отметить важность задания отступа именно для ссылки, а не для 
блока целиком. 

Рассмотрим два варианта записи. Первый, как в нашем случае, когда пишется два 
правила: 

#тепи( 

міеһ: 143рхг 
молы м 

райдіпс-1еЁс: 5рх; 

} 
Второй вариант, когла отступ задан для блока в целом: 


#тепи { 
раддіпа-1е#с: 5рх; 
мійсһ: 143рх; 


Во втором случае столкнемся с проблемой некорректно работающей блоковой модели 
в браузере Іліегпеї ЕхрІогег версий 5.х и 6.0 (в режиме обратной совместимости). Вспом- 
ните, в этих браузерах некорректно работает свойство міаєћ, определяющее полную 
ширину блока, а не ширину только его контентной части. В результате, при использова- 
нии второго варианта полная ширина блока #тепи в браузере 1тмегпе! Ехрюгег останется 
равной 143 пикселям, а в браузерах Орсга и Могла она увеличится на 5 пикселей за счет 
отступа слева. Использование первого способа позволяет избежать подобных проблем, 
не прибегая к различным вариантам написания кроссбраузерного С$$ с целью устране- 
ния различий блоковых моделей. 

Мы не использовали псевдоклассы для ссылок, поэтому все ссылки — активные, по- 
сещенные и любые при наведении на них указателя — будут выглядеть одинаково. В слу- 
чае со ссылками в меню лучше не менять вил посещенных ссылок, так как меню должно 
всегда выглядеть одинаково. А вот внешний вид ссылок при наведении на них указателя 
мыши можно изменить, например, сделав их светлее. Тогда надо записать правила сле- 
дующим образом (используя группировку селекторов): 

#тепи А:1іпк, #тепи А:асбіуе, #тепи А:уівібеа( 

со1ог: #333300; 

ЕопЕ: Бо1а 0.Вет Таһота, ѕап-ѕегіғ; 

райаіпа-1еѓ 

Бех -десогасіоп:попе; 


} 

#пепи А:Боуег( 
со1ог: #ЕЕЕ; 

} 


Если теперь загрузить наш код в браузер, то он будет выглядеть так, как показано на 
рис. 16.12. На этом рисунке видно, что заполнение фоновым цветом блока меню (по вер- 
тикали) заканчивается там, где заканчивается текст. Высота блока явно не задана, поэто- 
му она определяется по содержимому блока. Ситуацию можно временно исправить, ука- 
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зав высоту блока явно. Аналогичные проблемы будут нас подстерегать и с другими бло- 
ками, поэтому можно зарансе договориться о том, что высоту для второго, третьего и чет- 
вертого блоков макета будем явно указывать равной 400 пикселям. Этого достаточно, 
чтобы получить приличный вид макета в окне любого браузера. 


Строительная фирма "ДОМ" ^ 


Строим, производим, продаем 


Рис. 16.12. Предварительные итоги — можно отметить недостаточное за- 
полнение цветом блока меню (по вертикали) 


После явного. ‘указания высоты в правиле ситуация должна исправиться, т.е. фоновый 
цвет будет распространяться на всю высоту блока. Теперь правило ‘будет выглядеть сле- 
дующим образом: 
$ттепи{ 

Ъаскогошпа: #080482; 

ров1Е1оп: аБво1аке; 

1еЁЕ: Орх; 

Сор: аџбо; 

міасћ: 143рх; 

Ћеідые: 400рх; 


Следующий блок (третий) солержит основной текст страницы, назовем его сопеепг. 
Ширина блока, как мы вычислили, должна быть равна 391 пиксель. Позиционировать 
блок будем абсолютно, по аналогии со вторым блоком меню. Сдвиг вправо должен быть 
выполнен на расстояние, равное ширине блока меню, т.е. 143 пикселя. Для смешения 
вниз воспользуемся ключевым словом ао, чтобы не задумываться о том, на сколько 
пикселей нужно производить этот слвиг. Получим такое правило для блока содержимого: 


#сопеепЕ{ 
Баскагоцпа: #ЕРЕ; 
ровісіоп: аъзо}иее; 
1е#с: 143рх; 
сор: аџбо; 
мідеһ: 391рх; 
Ћеі ће: 400рх; 


Фон этого блока должен быть белым. Высоту в 400 пикселей задаем, чтобы получить 
полное заполнение фоновым цветом. 
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В код документа следует поместить сам блок и его содержимое: 


<0Іу 1а="сопЕепЕ"> 
<Р><БТВОМЗ>Фирма “Дом"</ЭТВОМС> образовалась в 1998 году и с тех пор зани- 
мает лидирующее место на рынке строительства и отделочных материалов. </Р> 
<Р>Первоначально предполагалось оказание услуг по строительству, ремонту 
квартир и сдаче помещений “под ключ”. Но в последствие стало понятно, что 
оказание комплекса услуг по подбору строительных и отделочных материалов, 
а также сантехники наиболее интересно клиенту. </Р> 
<Р>Фирма "Дом" имеет <А НВЕР=“#">сеть магазинов</А>, расположенных в раз- 
ных районах города. В них вы можете найти все для вашего дома, начиная с от- 
делочных материалов и заканчивая мебелью и аксессуарами. </Р> 
<Р>Наши опытные дизайнеры помогут вам сделать выбор. При необходимости 
возможно компьютерное моделирование и перепланировка квартиры.</Р> 
</рту> 


Теперь облагородим текст абзацев. В первую очередь следует задать отступы, чтобы 
текст выглядел более аккуратно. Сделать это нужно очень внимательно, чтобы не столк- 
нуться с разночтением в блоковых моделях. Есть один хороший способ решить эту зала- 
чу. Сейчас наша страница выглядит так, как показано на рис. 16.13. 


25-28 ] А 
Строительная фирма "ДОМ 


Строим, производим, продаем 


"Фирма “Дом” образовалась в 1998 году и с тех пор 
занимает лидирующее место на рынке строительства и 
отделочных матерналов. 


Первоначально предполагалось оказание услуг по 
‘строительству, ремонту квартир и сдаче помещений "под 

хлюч”. Но в последствие стало понятно, что оказание 

комплекса услуг по подбору строительных и отделочных Ша 
матерналов, а также сантехники наиболее интересно 

клиенту 


Фирма "Дом имеет сеть магазинов, расположенных в 
разных районах города В нихвы можете найти все для 
вашего дома, начиная с отделочных материалов и 
заканчивая мебелью и аксессуарами 


Наши опытные дизайнеры помогут Вам сделать выбор 
При необходимости возможно компьютерное 
моделирование и перепланировка квартиры 


Рис. 16.13. Отступы в абзацах текста в третьем блоке #сопеепе с основным 
содержимым страницы отсутствуют 


Добавлять отступы непосредственно в правило для селектора #сопеепеЕ не хотелось 


бы, поскольку это потребует устранения различий в реализации блоковых моделей. Если 
слегка модифицировать НТМІ -код блока #сопсепе, то можно выйти из положения 


с минимумом проблем. Изменим код следующим образом: 
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<рту #9="сопкепЕ"> 
<0Іу> 
~ текст абзацев... 
</0ту> 
</0Іу> 
а теперь запишем новое правило в таблицу стилей: 


#сопбепе Оту{ 
райдіпа: 0.5ет; 
} 
В результате отступы будут задаваться уже для элемента рту, находящегося внутри 
контейнера #сопеепе. Это именно то, что нам нужно. Так же можно выровнять абзац- 
ные отступы между абзацами, написав простое правило: 


#сопсепі Р{ 
пакдіп-сор: Оет; 
} 


В результате вид страницы в браузере изменится в лучшую сторону (рис. 16.14). 
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Фирма “Дом” образовалась в 1998 году и с тех пор 
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Первоначально предполагалось оказание услуг по 
строительству, ремонту квартир и сдаче помещений 
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оказание комплекса услуг по подбору стронтельных и + 
отделочных материалов, а также сантехники наиболее 
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Рис. 16.14. Организация отступов для блока #сопбепе с помощью вложенного 
элемента Ту 
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Теперь надо описать стиль ссылок, расположенных в основном тексте. Думаю, не 
нужно удалять подчеркивание, достаточно только подобрать цвет, подходящий к цвето- 
вой гамме сайта. Для посещенных ссылок следует написать отдельный стиль. 


#сопЕепЕ А:1іпк, #сопеепЕ А:ассіме{ 
со1ок: #330; 


} 

#сопеепЕ А:һоуег( 
со1ок: #060; 

} 

#сопсепс А:уіѕісеа{ 
со1ок: #996; 

} 


Наконец, остался последний, четвертый, блок для баннеров и счетчиков. Назовем его 
#Ъаппех. Позиционирование блока выполним аналогично двум предыдущим. Смещаем 
его вправо на 535 пикселей. Кроме того, текст, картинки и прочее содержимое внутри 
блока должны быть отцентрированы. Запишем соответствующее С$$-правило: 

#ъаппег{ 

Баскагоипа: #999966; 

розісіоп: арѕо1џбе; 

1еёЕ: 535рх; 

ор: аџёо; 

сехі-а1ідп: сепкег; 

удав: 105рх; 

Һеісһће: 400рх 


Теперь в НТМІ -коде можно создать сам блок и поместить в него требуемое содержимое: 
<0Іу ід="Баппег"> 

<ВВ> 

<ІМС 5ЕС="іпадеѕ/Љаппег100.6іЁ" ИТОТН="100“ НЕТСНТ=“100" ВОБРЕВ="О"> 

<ВЕ><ВВ> 

<ТМС $ВС="Зтадез/Ъаппек100.91Е" МІРТН="100" НЕТСНТ=“100* АШТ="* 
ВОВРЕЕ="0"> 

<ВЕ><ВЕ> 

<ІМС ЅЕС="іладеѕ/Кпор1.9іЁ" ИТОТН="88" НЕІСНТ="31" ВОВОЕВ=“"0“> 

<ВЕ><ВВ> 

<ТМС 5ЕС="іпадеѕ/Кпор2.91#" ИТОТН="88" НЕІСНТ="31" ВОКРЕК="0"> 
</0ту> 


В результате наша страница приняла вид, уже достаточно близкий к идеальному 
(рис. 16.15). 

Для решения проблемы можно попробовать задать высоту блока в процентах, — на- 
пример, 80% от высоты, но в общем это ничем не отличается от задания высоты в пиксе- 
лях. Даже если в качестве значения высоты мы зададим какое-то очень большое число, 
превосходящее объемы текста, это не решит проблему. В этом случае страница увеличит- 
ся до заданного нами размера, появится вертикальная полоса прокрутки, которая будет 
прокручивать “пустоты”, заполненные фоновым цветом. Таким образом, такое решение 
не вполне подходит, тем более что есть способ лучше, хотя он также не лишен малень- 
кого недостатка. 
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Вертикальные размеры второго, третьего и четвертого блоков непредсказуемы, и, тем 
более, они могут отличаться на разных страницах сайта. Зато нам известны горизонталь- 
ные размеры и они фиксированны: ширина второго блока #тепи 143 пикселя, фоновый 
цвет #08р4в2, ширина блока #сопеепЕ 391 пиксель, фоновый цвет белый, третий блок 
#раппег имеет ширину 106 пикселей и цвет #996. Используя эту информацию, рисуем 
в графическом редакторе полоску шириной 640 пикселей и высотой 2 пикселя. Первые 
143 пикселя закрашиваем цветом фона меню, следующие 391 пиксель будут белыми и по- 
следние 106 пикселей закрасим цветом блока баннеров. Теперь слегка модифицируем 
С$8-правило элемента ВОрү: 


Ворү{ 
Ђаскагоцпа: иг1 (іпадеѕ/арѕ Ба.9іЕ) 0 0 кереаЕ-у #ВРАРЭ2; 
} 


В нем, кроме основного цвета фона, задаем фоновое изображение. В качестве этого изо- 
бражения берем полоску, которую только что создали в графическом редакторе, и разреша- 
ем повторение фона только по вертикали. 


Галич тоны ке 


им, производи даен 


Фирма “Дом” образовалась в 1998 году и с тех пор 
занимает лидирующее место на рынке строительства и 
отделочных материалов. 


Первоначально предполагалось оказание услуг по 
строительству, ремонту квартир и сдаче помещений 
"под ключ" Но в последствие стало понятно, что 
оказание комплекса услуг по подбору строительных и 
отделочных материалов, а также сантехники наиболее 
интересно клиенту 


Фирма "Дом" имеет _го> „расположенныхв 
разных районах города В нихвы можете найти все 
для вашего дома, начиная с отделочных матерналов и 
заканчивая мебелью и аксессуарами 


Нашя олытные дизайнеры помогут Вам сделать 
выбор. При необходимости возможно компьютерное 
моделирование и перепланировка квартиры: 


Добавляем еще один параграф текста, чтобы 
проверить переполнение блока 


Рис. 16.15. Вид сайта после добавления блока баннеров 
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В орма ДОМ Мостова ПовеглеЕ Ері 


| Ве БӘ Мөн Расе Тоон Бек 2 


о-оо а м е- ш- лш ТИЕ 
Строительная фирма "ДОМ" >! 


Строим, производим, продаем 


Фирма “Дом” образовалась в 1998 году и с тех пор 
занимает лидирующее место на рынке строительства и 
отделочных материалов. 


Первоначально предполагалось оказание услуг ло 
строительству, ремонту квартир и сдаче помещений 
"под ключ" Но в последствие стало понятно, что 
оказание комплекса услуг по подбору строительных и 
отделочных матерналов, а также сантехники наиболее 
интересно клиенту 


Фирма "Дом" имеет 51 а „расположенныхв 
разных районах города В них вы можете найти все 
для вашего дома, начиная с отделочных материалов и 
заханчивая мебелью и аксессуарами 


Наши опытные дизайнеры помогут Вам сделать 
выбор При необходимости возможно компьютерное 
моделирование и перепланировка квартиры 


Добавляем еще один параграф текста, чтобы 
проверить переполнение блока 


Рис. 16.16. Переполнение блока основного содержания по высоте 


После этой процедуры у наших блоков появится продолжение, закрашенное нужным 
цветом. Заливка будет продолжаться точно до конца страницы в окне браузера независи- 
мо от того, какое количество текста или рисунков находится в каждом из блоков — все 
они всегда будут заканчиваться на одном уровне, в конце окна браузера (рис. 16.17). Не- 
достаток у метода только один — пришлось добавить графический элемент, но размер 
этого изображения всего 103 байт. Думается, это незначительная плата за привлекатель- 
ность нашей страницы! 

Надеюсь, что на этом примере суть абсолютного позиционирования стала вам более 
понятна. Кроме того, мы приобрели дополнительный опыт верстки сайта с фиксирован- 
ными размерами и рассмотрели несколько новых способов, как избежать проблем с раз- 
личиями в реализации блоковой модели и неопределенностью высоты блоков. Полный 
код этого примера представлен в приложении Б. Налеюсь, у вас все получилось! 

Теперь можно перейти к следующему типу позиционирования — фиксированному, 
прелставляющему собой подвид абсолютного. 
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Фирма Дом” образовалась в 1998 году и стех пор 
занимает лидирующее место на рынке строительства м 
отделочных матерналов 


Первоначально предполагалось оказание услуг по 
строительству. ремонту квартир и сдаче помещений 
"под ключ" Но в последствие стало понятно, что 


оказание комплекса услуг по подбору строительных и 
отделочных материалов, а также сантехники нанболее 
интересно клиенту 


Фирма "Дом имеет „расположенных в 
разных районах города В них вы можете найти все 
для вашего дома, начиная с отделочных матерналов и 
заканчивая мебелью и аксессуарами 


Наши опытные дизайнеры помогут Вам сделать 
выбор. При необходимости возможно компьютерное 
моделирование и перепланировка квартиры: 


Добавляем еще один параграф текста, чтобы 
проверить переполнение блока 


Рис. 16.17. Окончательный вид сайта — высота блоков выровнена с помощью 
‘специально созданного фонового изображения 


Фиксированные блоки 


Ранее упоминалось одно довольно интересное значение свойства роѕісіоп — Е1хей. 
Вспомните, аналогичное значение имеет и свойство Баскакоцпа. Подобно тому, как за- 
крепляется и не прокручивается фон при задании Баскагочцпа : Е1хеа, так и блок, соглас- 
но спецификации С$$, с описанием роѕібіоп: #іхеа должен быть зафиксирован и на- 
ходиться всегда в области просмотра страницы, т.е. также не должен прокручиваться. 

Все было бы замечательно, но данное значение не поддерживается браузерами Іпќег- 
пе ЕхрІогег, что делает его практически неприменимым. Однако браузеры Орега 5+, 
Мезсаре 6.1+ и Мо2Ша его прекрасно понимают, тогда как Іпіегпе! Ехріогег воспринима- 
ет подобные блоки так, будто они расположены в нормальном потоке, что, естественно, 
неверно. 

Рассмотрим конкретный пример: создадим два блока. Первый будет фиксированным 
и должен располагаться в левой верхней части окна браузера. Поместим в него, напри- 
мер, пункты меню. Ограничим ширину блока 100 пикселями. 


ЕЖЕ 
роѕібіоп: Ғіхед; 
её: Орх; 
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сор: Орх; 
міаһе:100рх 


Второй блок должен прокручиваться, как обычный. Его мы позиционируем абсолют- 
но со сдвигом вправо на 100 пикселей, чтобы он не “налезал” на фиксированный. 
фтоуе{ 

роѕібіоп: арѕо1џбе; 

Лее: 100рх; 

Бор: Орх; 


Теперь сформируем из этих блоков страницу. 
<0ІУ ід=*Ғіх"> 

Пункт 1<ВВ> 

Пункт 2<ВЕ> 

Пункт 3<ВВ> 

Пункт 4 
</рту> 
«рту за="тоуе"> 
Основной текст страницы должен прокручиваться<ВЕ> 
Основной текст страницы должен прокручиваться<ВВ> 
Основной текст страницы должен прокручиваться<ВА> 


«лм 
В окне браузера Мохіа или Орега такая страница будет выглядеть так, как показано 


на рис. 16.18, — слева располагаются пункты меню, которые при прокрутке текста во 
втором блоке не перемещаются. 


Основной текст страницы должен прокручиваться 
Основной текст страницы должен прокручиваться 
Основной текст страницы должен прокручиваться 
Основной текст страницы должен прокручиваться 
Основной текст страницы должен прокручиваться 
Основной текст страницы должен прокручиваться 
Основной текст страницы должен прокручиваться 
т. 


Рис. 16.18. Фиксированный блок в браузере МозИа 


В некотором смысле фиксированные блоки похожи на фреймы. Ведь, например, на- 
вигационное меню сайта, помещенное в отдельный фрейм, также остается на экране по- 
стоянно. Отличие только в том, что внутри самого фрейма доступна прокрутка и допус- 
тимо прокручивание содержимого отдельных фреймов независимо друг от друга. 


Плавающие блоки 


Для того чтобы в С$$ реализовать “резиновую” верстку, были придуманы плавающие 
блоки. Их нельзя позиционировать с точностью до пикселя, как, например, абсолютно 
позиционируемые. Они могут свободно перемещаться и “прижиматься” к краю своего 
контейнера. Подобным образом себя ведут рисунки в НТМІ., для которых залано вырав- 
нивание при помощи атрибута а1 197. 

Плавающие блоки в С$$ определяются свойством Ё1оае. 
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Свойство Поаї 


Данное свойство определяет, будет ли блок плавающим и в какую сторону он будет 
перемещаться. Свойство может принимать следующие значения. 


е 1еЕЕ — структурный блок перемещается влево. Остальное содержимое документа 
‘будет выводиться вдоль правой стороны блока, начиная с самого верха. 

• гісһе — структурный блок перемещается вправо. Остальное содержимое доку- 
мента выводится вдоль левой стороны блока, начиная с самого верха. 

• попе — блок не перемещается (значение по умолчанию), т.е. позиционируется 
согласно алгоритму, заданному свойством роѕісіоп. Если свойство роз Еф оп не 
задано, то предполагается нормальный поток. 


Рассмотрим пример. Допустим, вы пишете статью, и по ходу необходимо вставлять 
ремарки или делать комментарии. Можно, конечно, оформить в статье сноски и там дать 
необходимые комментарии. А можно такие комментарии поместить внутрь плавающего 
блока, а сам блок разместить рядом с нужным местом в статье. 

Создадим такой блок, указав для него свойство Е1оаЕ со значением гісће. Для пла- 
вающих блоков всегда надо явно указывать ширину, иначе блок будет растягиваться так, 
чтобы вместить в себя все его содержимое. 
соттепе ( 

Ђаскатоџпа: #ЕЕС; 

Богдег: 1рх воі; 

райдіпс: 5рх; 

мідёћ:150рх; 

Ғ1оаё: гідће; 


Теперь разместим в НТМІ.-коде фрагмент текста и блок комментария к статье: 
<ОТУ с1аѕв= "соптепе"> 

Плавающий блок может “прилипать” к левой или правой стороне контейнера, 
сторона задается свойством <ЕМ>Е1оаЕ</ЕМ>. 
</рту> 
<Р> 
</Р> 


В окне браузера этот код будет выглядеть так, как показано на рис. 16.19. Как видите, 
теперь можно заставлять внешний текст обтекать не только рисунки, как было в НТМІ., 
но и текстовые блоки. 


Для того, чтобы в С55 было возможно 
реализовать "резиновую" верстку.были 
придуманы плавающие блоки Их 


нельзя позиционировать с точностью 
до пикселя, как, например. абсолютно 

позиционируемые_ Они могут 

свободно перемещаться и 

“прижнматься" к краю своего 

контейнера Похожим образом себя ведут рисунки в НТМІ,, 
для которых при помощи атрибута аёл задано выравнивание. 


Рис. 16.19. Плавающий блок расположен у правого края 
контейнера — остальной текст обтекает его слева 
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Если изменить значение свойства Е1оаЕ с гісће на 1еғс, то блок переместится к ле- 
вому краю контейнера, которым является сейчас окно браузера (рис. 16.20). 
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Для того, чтобы в С55 было возможно 
|реализовать "резиновую" верстку, были 
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для которых при помощи атрибута аңа задано выравнивание 


Рис. 16.20. Плавающий блок у левого края контейнера — 
текст обтекает его справа 


Что же произойдет, если в НТМІ_-коле разместить несколько одинаковых плавающих 
блоков? Рассмотрим такой пример кода: 


<ОТУ с1азз="сомпепЕ"> 
Первый плавающий блок должен прилипать к левому краю контейнера. 
</01У> 

«РТУ с]авв="соппепе"> 

Второй плавающий блок должен прилипать к левому краю контейнера. 
</0ІМ> 

<Р> 

-. некий фрагмент текста - 

</Р> 


В браузере этот код будет выглядеть так, как показано на рис. 16.21. В спецификации 
С88 такая ситуация описана. На этот счет сказано следующее: “Если текущий переме- 
щаемый блок левосторонний и существует хотя бы один левосторонний перемещаемый 
блок, который был сгенерирован в исходном документе раньше него, то левый внешний 
край текущего блока должен находиться справа от правого внешнего края предыдущего 
блока или верхний его край должен быть ниже, чем нижний край предыдущего блока”. 
Подобное правило имеет место и для правостороннего перемещаемого блока. 


пнавакощья блок "пссотой аста ИИ 
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Похожим образом себя ведут рисунки в НІМІ. для которых 
при помощи атрибута айл задано выравнивание 


21 
Рис. 16.21. Два установленных влево плавающих блока 
размещены браузером на одной горизонтальной линии 
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Таким образом, второй блок из нашего примера располагается правее первого, не- 
смотря на то что также является левосторонним. Управлять положением перемещаемых 
блоков можно с помощью свойства с1еаг. По образу действия это аналог атрибута 
с1еаг, с которым мы встречались у элемента ВК при изучении НТМІ.. 


Свойство сіеаг 


Данное свойство определяет, какие стороны перемешаемых блоков не могут соседст- 
вовать с другими перемещаемыми блоками. Свойство применяется только для элементов 
блокового уровня и может принимать следующие значения. 


® 1еғс — блок должен размещаться ниже всех левосторонних плавающих блоков. 
е кадре — блок должен размещаться ниже всех правосторонних плавающих блоков. 
е БоОЕН — блок должен размещаться ниже всех плавающих блоков. 


• попе — никаких ограничений на положение блока относительно перемещаемых 
объектов не накладывается. 


Если у некоторого элемента существуют перемещаемые потомки, свойство с1еаг на 
них не распространяется. 
Таким образом, свойство с1еаг можно применить и к плавающему блоку, и к любо- 


му структурному блоку. Привелем пример с двумя нашими блоками. Для второго блока 
укажем свойство с1еаг:1еёб. 


<0ту с1азв="соптепе"> 

Первый плавающий блок должен прилипать к левому краю контейнера. 
</оту> 

<0ту с1азз="сопшепе" вбуіе="с1еаг:1ебс"> 

Второй плавающий блок должен переместиться ниже первого блока. 
</оту> 

<Р> 

.. некий фрагмент текста 

</в> 


В результате вид страницы в браузере изменится так, как показано на рис. 16.22. 


Первый плавающий | ДлЯ того, чтобы в С5$ было 
АСЕ возможно реализовать "резиновую" 
прилипать клевому |ВеРСГКУ.были придуманы 
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Второй плавающий пикселя, как, например, абсолютно 
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ведӯтрисункя в НТМІ., для которых 
при помощи атрибута ађап задано выравнивание 


Рис. 16.22. Действие свойства с1еаг :1еЕЕ на пла- 
вающий блок 
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Из всего сказанного выше можно сделать вывод, что несколько плавающих блоков будуг 
располагаться на одной линии, если их суммарная ширина будет меньше ширины контейнера 
или равна ей. Если в качестве контейнера рассмотреть окно браузера, то таким образом легко 
реализовать верстку в несколько колонок. Ширину блоков при этом можно указать в процен- 
тах, так как при указании ширины в фиксированных единицах не удастся заранее предсказать 
ширину окна браузера у конкретного пользователя — она зависит и от установленного разре- 
шения монитора, и оттого, раскрыто ли окно браузера на полный экран. 

Создадим три плавающих левосторонних блока так, чтобы их суммарная ширина не 
превышала 100% ширины окна. 


#51оск{ 
Баскогошпа: #ЕЕС; 
Богдег: 1рх во1і 
радаіпд: 5рх; 
міась:30%; 


} 

#51 оск2{ 
Баскагоцпа: #ЕРС 
Богӣег: 1рх з011 
рада:та: 5рх; 
міаєћ:30%; 

Ғ10аб: 1еёе; 


} 

#51оскз( 
Баскахоциа: #РЕС 
Богдек: 1рх зо1ї 
раддіпа: 5рх; 
міасһ:30%; 


} 


<0ІУ за-"Ы1оск1"> 
Первый плавающий блок должен прилипать к левому краю контейнера. 
</рту> 
<ОТУ 19="Ь1оск2"> а 
Второй плавающий блок должен выстроиться с первым в одну линию. 
</0Іу> 
<0Ту ід-"Ы1оскЗ*> 
Третий плавающий блок должен выстроиться с двумя предыдушими в одну линию 
независимо от размера окна браузера. 
</рту> 
Высота колонок при этом будет зависеть от содержимого блоков (рис. 16.23). 
Можно легко подровнять колонки по высоте, указав в С$$-правилах для блоков свойст- 
воћһеіс̧һе: 100%. Работать это будет во всех последних версиях браузеров (рис. 16.24). 
Этот механизм позволяет легко реализовать “резиновую” верстку с нужным количе- 
ством колонок. Но один недостаток все же есть — когда объем текста превысит высоту 
колонки, в браузерах Іпіегпеї Ехрюгег и Орега она растянется, а в браузере Мо2Ша текст 
будет перекрывать колонку (рис. 16.25). Из этого можно сделать вывод, что с помощью 
'С85, не прибегая к дополнительным хитростям, невозможно сверстать сайт с одинако- 
выми по высоте колонками. Единственный выход — не задавать высоту колонок явно, 
тогда они всегла будут растягиваться до нужной высоты. 
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Рис. 16.23. Три колонки — высота каждой из них зависит от со- 
держимого 
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Рис. 16.24. Высота колонок выровнена 
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Рис. 16.25. Переполнение блока текстом в браузере 
МогШа 
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Слои в С$$ 


В С85 2 существует такое понятие, как слой. Надо сказать, оно привычно всем, кто ра- 
ботал с любым графическим редактором, но, возможно, пока непонятно для остальных. 

Создавая блок в С$$, мы всегда четко задаем его параметры, а также позиционируем его 
в определенное место на экране. Таким образом, любой блок имеет две координаты х и у, 
которые определяют положение блока на плоскости экрана. Но в С5$ 2 есть еще и третья, 
пространственная координата =, которая определяет номер слоя, на котором находится блок. 

Слои формируются по аналогии со слоями в графическом редакторе, где у изображе- 
ния всегда есть основа, фоновый слой (Баскргоџпа). Поверх него накладываются как бы 
прозрачные кальки такого же размера, как и фоновый слой, и на определенные части 
этих калек нанесен некоторый рисунок. Накладываясь друг на друга, рисунки на разных 
слоях формируют общее (композитное) изображение. Естественно, что изображение на 
слое, лежащем поверх остальных, перекрывает изображение на слоях, находящихся под 
ним. Таким образом, изображение на самом верхнем слое всегда видно полностью, тогда 
как изображения на нижних слоях могут быть видны лишь частично или не видны вовсе, 
в зависимости от структуры изображений. 

Слои в С5$ в этом отношении очень похожи на слои графических редакторов. Фоном 
здесь служит основной код Међ-страницы, а с помощью С$$ вы можете какой-либо эле- 
мент вынести на отдельный слой. Сделать это можно, используя С55-свойство 2-1паех. 
Принимаемые этим свойством значения указывают порядковый номер слоя. Чем больше 
номер, тем выше слой находится в стопке слоев. Слой с номером 1 находится непосред- 
ственно над основной страницей, слой с номером 2 над первым и т.л. В результате слой 
с номером 2 будет ближе расположен к пользователю, просматривающему вашу страни- 
цу, чем слой с номером 1. 

С помощью слоев в комбинации со свойством уіѕірі1ісу можно создавать различ- 
ные раскрывающиеся меню, динамично меняя значение свойства уіѕірі11ібу для раз- 
ных слоев. Для этого подменю располагаются на отдельных слоях, и когда пользователь 
щелкает на команде меню, на передний план выводится тот слой, в котором хранится 
выбранное пользователем подменю. 

В последнее время на нскоторых страницах часто наблюдается размещение на от- 
дельном слое разного рода рекламной информации. Вы открываете страницу, а поверх ее 
основного содержимого располагается отдельный слой с рекламным Е1аѕћ-роликом или 
просто статический рекламный текст. Спустя некоторый промежуток времени на этом 
слое появляется кнопка, позволяющая убрать рекламную информацию. Чаще всего эта 
кнопка оформляется наподобие кнопки закрытия окна в Міпдомѕ — с изображением 
крестика (х). Щелкнув на ней, вы просто делаете слой невидимым, и он больше не меша- 
ет вам читать основной текст \\еб-страницы. Реализовать такой сценарий без слоев было 
бы довольно проблематично. 


Пример — раскрывающееся меню 


Вернемся к созданию раскрывающегося меню и попробуем детально рассмотреть 
процесс его создания. В целом, здесь нам понадобится знание С$5-позиционирования 
и основ работы со слоями, а также потребуется написать несколько однотипных функ- 
ций на языке Јауа$сгірі, которые будут управлять работой нашего меню. 

В первую очередь создадим основные компоненты сайта. Договоримся, что их будет 
три: заголовок сайта, строка меню и блок основного содержимого. Все три блока будуг 
располагаться друг под другом, т.е. сайт будет верстаться в одну колонку (рис. 16.26). 
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раньше работал с Еак и Магув! над другими проектами, и когда сни предложили 
мне поработать над этим проектом, я с удовольствием согласился. Ведь я же 
вырос на этом комиксе. Я люблю их всей душой. Это будет лучший фильм в 
трилогии. Это будет нашим "Возвращение короля". Продюсеры фильма 
планируют начать съемки летом, а также находятся в поисках режиссера, так 
какот режиссера двух первых фильмов Брайана Сингера решили отказаться. 
Актерский же состав предполагается оставить таким, как и раньше. 


Рис. 16.26. В нашем примере создания раскрывающегося меню 
сайт будет сверстан в одну колонку 


Разобьем работу по созданию документа с раскрывающимся меню на этапы: 


• впервую очередь создадим структуру, образуюшую саму МеБ-страницу; 
* затем создадим подменю и разместим их на отдельных слоях; 


• в последнюю очередь напишем на ЈауаЅсгірі несколько функций и заставим наше 
меню работать. 


Итак, для создания самой страницы нам потребуются три блока: заголовок, меню 
и блок основного содержимого страницы. Позиционировать их будем абсолютно, чтобы 
точно знать расстояние между блоками — это нам пригодится, когда придет время пози- 
ционировать блоки с подменю. 

Первый блок будет очень прост, назовем его #ћеаа. В нем расположится только один 
заголовок. Запишем стиль для этого блока: 
#пеаа( 

Һеіс̧һе:50рх; 

міасһ: 100%; 

роѕібіоп:арзѕо1џбе; 

1еёе: Орх; 

Бор: Орх; 


Мы задали ширину блока в 100%, чтобы он был на всю ширину окна браузера. Также 
мы зафиксировали высоту в 50 пикселей, при этом блок позиционируется в левый верх- 
ний угол экрана. Запишем его НТМІ -код: 


<0Іу Ір="Һеаа"> 
<Н1>Все о кино</Н1> 
</рту> 


Внутри этого блока находится всего один заголовок. Запишем для него простой стиль, 
который выровняет его по правому краю и заласт синий цвет. 
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#һеаа н1{ 
со1ог: паху; 
шагдіп-сор: Оеш; 
райаіпо-гідће: 0.5ет; 
Сехс-а1ісп: клаве; 


Свойство тагсіп-бор: Орх на первый взгляд кажется ненужным, но оно помогает 
устранить различия в размерах абзацных отступов, которые установлены в разных брау- 
зерах. В результате задания этого свойства расстояние от верхнего края окна до заголовка 
будет одинаково во всех браузерах. Отступ справа в 0, бет сделает заголовок аккуратнее. 

Теперь займемся строкой меню. Она будет располагаться прямо под заголовком. 
Стиль этого блока будет следующим: 

#тепи( 

Ъаскакоциа: #С0С0С0; 

Ъогдег-боссот: 1рх во11а; 

Ъогдег-сор: 1рх зо11а; 

райдіп: 2рх 10рх; 

ровібіоп:арѕо1џбе; 


Єор:50рх; 
міаєһ:100%; 


Строка меню будет шириной на весь экран, сверху и снизу будет тонкая черная гра- 
ница. Весь блок булет сдвинут вниз на 50 пикселей, что совпадает с высотой блока 
#Ъеаа. Чтобы текст не прилипал к краям блока, создаем отступы. Сверху и снизу по- 
меньше, всего 2 пикселя, с боков по 10 пикселей. Все отступы задаем именно в пикселях, 
а не в каких-либо других относительных единицах, для того чтобы эти размеры не зави- 
сели от базового размера шрифта, установленного в браузере, или от каких-либо других 
параметров. Здесь как никогда нам нужна точность позиционирования текущих элемен- 
тов и будущих блоков подменю. =. 

НТМЕ-код меню будет содержать только ссылки на разделы, разделенные двумя го- 
ризонтальными линиями и оформленные следующим образом: 
<0Ту гр="тепа"> 

<А НВЕЕ="#">Главная</А>&пЬзр; | | &ПЪвр; 


<А НЕЕР="#">Фильмы</А>&пЬѕр; | | &пЪ5р; 
<А НЕЕР="#">Статьи</А>5пЬр; | | &пЬзр; 
<А НВЕЕР="#">Обзоры</А>&пЬзр; | | &пзр; 


<А НВЕЕ="#">Форум</А> 
</от\> 

Стиль для ссылок внутри блока #тепи должен определить параметры шрифта, зафик- 
сировать цвет и размер шрифта в пикселях, полужирное начертание и убрать подчерки- 
вание. 
#тепи А{ 

со1ог: пауу; 


ФопЕ: Бо1А 13рх Тавота, запз-зег1{; 
Сехс-десогабіоп: попе; 


И последний блок. гле располагается основной текст страницы, должен находиться 
ниже двух предыдущих на 80 пикселей. Правило для него будет следующим: 


#сопбепе( 
Ғопс-візе: 0.Вет; 
райаіпс: 0.5еп; 
ровісіоп: аБвойиее; 
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Іеғє: 0рх; 
Фор: 80рх; 


Небольшие отступы со всех сторон отодвинут текст от краев блока. Размер шрифта 
туг уже можно задать в относительных единицах ет. Это предоставит пользователю воз- 
можность увеличить его в случае необходимости. Размеры шрифта меню и подменю за- 
дадим жестко в пикселях, чтобы они “не расползлись”. 

НТМЕ-код третьего блока будет простым: 


<01у Ір="сопёепс"> 

<Н1>Х-Меп 3</н1> 

<Р> 

205 Сепьигу Рох и Макуе1 ЗЕи@{0з сдвинулись с места в деле “Люди Х 3*. 
Новый сценарий пишет Саймон Кинберг (“Мистер и Миссис Смит", "Электра", 
"Фантастическая четверка"). Кинберг сообщил, что сюжет пока находится в 
разработке. "Мне понравились 2 первых фильма сериала, — сказал Кинберг. — 
Я и раньше работал с Ғох и Магуе1 над другими проектами, и когда они пред- 
ложили мне поработать над этим проектом, я с удовольствием согласился. Ведь 
я же вырос на этом комиксе. Я люблю их всей душой. Это будет лучший фильм 
в трилогии. Это будет нашим "Возвращением короля". " 

</Р> 

<Р> 

Продюсеры фильма планируют начать съемки летом, а также находятся в по- 
исках режиссера, так как от режиссера двух первых фильмов Брайана Сингера 
решили отказаться. Актерский же состав предполагается оставить таким, как 
и раньше. 


</Р> 
</рту> 


Теперь будем создавать и позиционировать блоки подменю. причем размешать их бу- 
дем на отдельных слоях, используя свойство 2 -іпдех. Создадим блоки, соответствую- 
шие пунктам меню по названию, и определим пункты подменю. 

1. Главная — блок подменю #таіп: 
о новости; 
о карта сайта. 
2. Фильмы — блок подменю #тоуіе: 
о комедии; 
мелодрамы; 
триллеры; 
ужасы; 
фантастика; 
боевики; 

о мультфильмы. 

3. Статьи — блок подменю #іѕѕие: 


ообо оо 


о окино; 
о обактерах; 
о о съемках. 
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4. Обзоры — блок подменю #зигуеу: 
о кино-новинки; 
о ЮУО-новинки. 
5. Форум — блок подменю #Еогиг: 
о вход; 
о регистрация. 


По строению все эти блоки похожи: светло-фиолетовый фон, темная тонкая граница, 
позиционирование абсолютное со сдвигом 74 пикселя от верхнего края окна браузера. 
Смещение от левого края будет у всех разное — в зависимости от блока: 10, 92, 173, 245 
и 322 пикселя соответственно. Эти величины подбирались опытным путем, так чтобы 
меню выглядело аккуратно и однотипно. 

Кроме того, лучше явно задать ширину для блоков подменю, чтобы все они были одина- 
ковы и по ширине — так меню будет лучше смотреться. Каждый из блоков должен распола- 
гаться на отдельном слое, удобнее будет их расположить на слоях по порялку от 1 до 5. 

Приведу код С$$-правил для блоков подменю — имеющиеся комментарии помогут 
вам легко в них разобраться. Обратите внимание на значения свойств 2-1п4ех. 

#таіл( 

Ъаскакоипа: #0909ЕС; 

богде: 1рх ѕо1ід #404082; 

міаєћһ:В0рх; 

роѕісіоп: арѕо1џбе; 

Теёе: 10рх; 

Сор: 74рх. 

уіѕіріІіє 


Ђаскагошпа: #0909ЕС; 
Богаек: 1рх 50114 #404082; 
мідећ:92рх; 
роѕісіоп: аБво1ике; 
1еЁс: 92рх; 
сор: 74рх 
уізірі1ісу: Һіадеп; 
2-іпдех:2; 

) 

#вв0е( 

Ъаскакоцпа: #0909ЕС; 
Богӣег: 1рх во1іа #404082; 
міаєћ: В0рх; 

роѕісіоп: арво10се; 

Іеғс: 173рх; 

сор: 74рх 

уіѕірі1іку: Һіддеп; 
2-іпдех:3; 

} 

#ецгуеуС 
Баскагоцпа: #0909ЕС; 
Ъогдег: 1рх ѕо1іа #404082; 
міасћ:90рх; 
роѕісіоп: аБзо1иее; 
1еЕЕ: 245рх; 


=-З3п4ех:4; 
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} 
#Еогшм 
Ъаскахоила: #0909ЕС; 
Богдег: 1рх зо14а #404082; 
міаєћ:80рх; 
роѕісіоп: арѕо1џсе; 
ТеёЕ: 322рх; 
Сор: 74рх; 
уіѕіЬі1ісу: Һіддеп; 
т-іпӣех:5; 


В НТМІ.-коде документа в любом месте можно написать код самих блоков подменю. 
Он прост, поскольку содержит только перечисление пунктов меню, и будет следующим: 
<0Іу і="таіп"> 

<А НВЕР="#">Новости</А> 

<А НВЕР="#">Карта сайта</А> 
</0ту> 
<ЮІУ іа="поуіе"> 

<А НВЕЕ="#">Комедии</А> 

<А НВЕР="#">Мелодрамы</А> 

<А НКЕР="#">Триллеры</А> 

<А НВЕЕ="#">Ужасы</А> 

<А НВЕЕ="#">Фантастика</А> 

<А НКЕР=" #">Боевики</А> 

<А НВЕЕ="#">Мультфильмы</А> 
</рту> 
<0ту ід="іѕзие"> 

<А НВЕР="#">О кино</А> 

<А НВЕР="#">06 актерах</А> 

<А НВЕР="#">О съемках</А> 
</оту> 
<01у ід="зигуеу"> 

<А НВЕР="#">Кино-новинки</А> 

<А НВЕР="#">БУО-новинки</А> 
</рту> 
<0ІУ ій=" Ғогип"> 

<А НВЕЕ="#">Вход</А> 

<А НВЕР=“#">Регистрация</А> 
</0ту> 


Теперь блоки подменю созданы. Осталось ссылки внутри блоков оформить таким 0б- 
разом, чтобы они напоминали меню УИпдо\з. При наведении указателя мыши на меню 
в среде Міпіомѕ пункт меню подсвечивается. Нечто подобное надо создать и нам. При- 
мер аналогичного меню мы уже рассматривали ранее, когда изучали свойство діѕр1ау. 
Туг потребуется применить такой же трюк, а именно — задать для ссылок свойство 
аіѕр1ау: Б1оск. Делаем мы это, во-первых, для того чтобы ссылка представляла собой 
не строчный, а структурный блок. Это позволит нам поменять фон ссылки при навеле- 
нии указателя и создать эффект, подобный меню \Ипво\5. Во-вторых, структурные бло- 
ки автоматически располагаются вертикально, т.е. нам не придется добавлять принуди- 
тельные разрывы строк <ВВ> после каждой ссылки. 

В первую очередь следует записать стиль лля ссылки в обычном состоянии, а затем 
запишем видоизмененный стиль для ссылок при наведении указателя мыши. Пользо- 
ваться лучше контекстным селектором. Для обычных ссылок правило будет следующим: 
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#паіп АС 
а1вр1ау: Ь1оск; 
со1ог: паху; 
ЕопЕ-в42е: 13рх; 
рааа1та: Орх Зрх; 
фехЕ-десогаЕ1оп:попе; 


Размер шрифта тут также задаем в пикселях, чтобы размер шрифта совпадал с раз- 
мером в основном меню. Убираем подчеркивание, задаем цвет и отступы сбоку. Следу- 
ет отметить, что ссылки внутри всех блоков подменю будут совершенно одинаковы по 
внешнему виду, поэтому аналогичные правила можно записать для остальных блоков, 
но целесообразнее воспользоваться группировкой селекторов и объединить все прави- 
ла в одно: 

#таіп А, #тоу1е А, #155ще А, #викуеу А, #Ёогит А{ 

аіѕр1ау: Ыоск; 

со1ок: пауу; 

ЕопЕ-812е: 13рх; 

радайпа: Орх Зрх; 

бехе -десогасіоп:попе; 


Теперь дело техники — написать стиль для псевдокласса : Һоуег , который будет ис- 
пользоваться для ссылок внутри подменю. Он должен определять более темный цвет фо- 
на, и, чтобы текст не сливался с фоном, булем менять цвет текста на белый. 

#паіп А:һоуег, #тоу1е А:Һоуег, #іѕѕџе А:һоуег, #ѕџгуеу А:һоуег, #Ёогит 


После этих преобразований “подсветка” ссылок уже должна срабатывать, однако 
в окне браузера мы увилим все блоки подменю одновременно выведенными на экран 
и наложенными друг на друга (рис. 16.27). Мы располагали блоки на слоях по порядку 
от 1 до 5, поэтому в браузере эти блоки булут располагаться в том же порядке: блок 
#поуіе на втором слое располагается поверх блока #та1п на первом слое, блок 
#іѕѕџе на третьем слое — поверх блока #тоуіе ит.д. 

Согласитесь, что одновременно все подменю видеть на экране нам совершенно не 
нужно, даже наоборот: нам необходимо, чтобы в каждый момент времени на экране было 
видимо только олно полменю — в зависимости от того, какой пункт меню выбран. Иначе 
говоря, мы будем подволить курсор к пункту меню и рядом будут появляться соответст- 
вующие подменю. Поэтому сейчас нужно “выключить” видимость всех блоков. Сделать 
это можно, прописав свойство уіѕіђі1ісу: һідаеп в стиле каждого блока подменю. 
После этого все блоки подменю исчезнут с экрана. 


Помните, что блоки лишь стали невидимыми, но в документе они по-прежнему при- 
сутствуют. А раз они по-прежнему находятся в документе и просто не должны ото- 
бражаться исходно, то в требуемый момент мы сможем включать видимость нужного 
блока с помощью средств ЈауаЅсгірї. 
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их всей душой. Это будет лучший фильм в трилогии. Это будет нашим "Возеращение 
короля", 


Продюсеры фильма планирую начать съемки петом, а так жа находятся в поисках 
режиссера, так как от режиссера двух первых фильмов Брайана Сингера решили 
отказаться. Актерский же состав предполагается оставить таким, как м раньше. 


Рис. 16.27. Расположенные на отдельных слоях блоки подменю 
‘исходно накладываются друг на друга 


Прежде чем писать сценарии лля нашего меню, следует сделать несколько замечаний 
по поводу особенностей ЈауаЅсгірі. ЈауаЅсгірі — язык, основанный на использовании 
‘объектов. Доступ к свойствам и методам объекта организуется с использованием точеч- 
ной нотации, т.е. при обращении имя объекта отделяется от имени его свойства 
(характеристики) или метода (функции) точкой. Например: 
па1п.зку1е.со1ок='дгееп' 


На языке ЈауаЅсгірі эта запись будет означать, что С55-свойству со1ох в стиле для 
блока таіп присваивается значение 'дгееп'. По аналогии можно изменять и значение 
свойства у15151 11 су блока — в зависимости от ситуации. 

В браузерах Імегпе‹ Ехрюгег и Орега написанные таким образом сценарии будут пре- 
красно работать, но в браузере МогШа механизм доступа к свойствам объектов несколько 
другой. Объекты там начинают существовать только после полной загрузки страницы, 
поэтому может случиться так, что пользователь будет пытаться обратиться к объекту, 
когда его еще не существует. Поэтому, чтобы сохранить универсальность метода, на 
практике мы будем пользоваться несколько другой схемой. 

В ЈауаЅсгірі существует встроенный метод себЕ1етепеВута (), который позволяет 
‘обратиться к объекту по идентификатору. Идентификаторами подменю в нашем случае 
являются идентификаторы С$$, которые мы им сами присвоили. После того как элемент 
найден, можно менять его свойства, в том числе и его стиль. Например. чтобы изменить 
свойство 7151111 су блока с идентификатором таіп, следует написать: 
досшпепе .десЕ1епепіВута ("паіп") .зсу1е.уіѕірі1ібу= 'уіѕіріе' 


Аналогично можно обращаться к любым объектам и менять любые свойства их стиля. 
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Для реализации нашей задачи потребуется написать несколько функций на языке 
Тауа$спре, которые будут управлять работой меню. Не пугайтесь, они очень простые 
и однотипные. Главная их задача — включать видимость нужного подменю. Эти функ- 
ции будут выполняться, т.е. работать, когда пользователь на странице выполнит некое 
действие, т.е. произойдет некое событие. Полный список событий, которые может обра- 
батывать сценарий на Јауа$сгірі, рассматривался, когда мы изучали элемент 5СВТРТ 
вНТМІ. 

В нашем случае функции будут начинать свою работу, когда пользователь подводит 
указатель мыши к пункту меню. Как только он подвел указатель к пункту, сразу же от- 
крывается подменю. Аналогично работает любое меню в операционной системе УИп4о\5. 
Когда пользователь перемещает курсор за пределы подменю, оно должно закрываться. 
Вот примерная схема работы нашего будущего меню. Ы 

Текст всех функций будем помещать между тегами: 
<ЗСВТРТ ТҮРЕ="бехЕ/јауаѕсгіре"> 


278СВІРТ» 

Сами теги можно разместить в любом месте нашего документа, но лучше, чтобы они 
располагались в элементе НЕА”. В общей сложности нам потребуется шесть функций. 
Первая будет отключать видимость всех блоков подменю, назовем ее Нідед11 (). Неза- 
висимо от того, какие значения имели свойства уіѕірі1і су пяти наших блоков подме- 

ю, эта функция будет делать их все невидимыми. 


Ғипссіоп НЁ4еА11() { 
‘аоситепе .десЕ1епепеВута( "таіп") .вку1е.1$15111ку='взадеп' 
Зосшпепе .чесЕ1епепсву1а( “поуіе") .віу1е.уіѕіЬі1ісу= ‘Һіадеп' 
аосшпепе .ЧеЕ1епепсВута( "ізвце") .всу1е.уіѕіЬі1ібу= ‘һіддеп' 
аосшпепЕ .ЧесЕ1епепЕВу1а ("ѕигуеу") .збу1е.уіѕірі1ісу= 'Һіадеп' 
аоситепе .десЕ1епепсВута( " Еогшт") .ѕсу1е.уіѕірі1ібу= ‘ћіадеп' 


В первую очередь, такая функция должна выполняться в тот момент, когда доку- 
мент только загрузился, т.е. когда пользователь первый раз видит страницу, он не дол- 
жен увидеть ни одного из подменю. Поэтому в элементе ВОБУ сразу будем вызывать 
эту функцию: 


<ВОрү Сортагоіп="0" Іеєстагдіп= 
оріоад="Нійел11 ()"> 


о" 


0" гісћспагдіп="0" Бобсоптагдіп= 
Таким образом, при загрузке документа будет вызвана функция нідел11 () , которая 
отключит видимость всех подменю, даже если какое-либо из них уже было видно. По та- 
кому же принципу необходимо записать еще несколько функций — по одной для каж- 
дого подменю. Назначение этих функций следующее: включить видимость конкретного 
меню и отключить все остальные, поскольку в каждый момент времени на экране у нас 
может находиться только одно подменю. Пользователь, вызывая какое-то подменю, ав- 
томатически закрывает все остальные. Названия функциям дадим такие же, как и иден- 
тификаторы соответствующих блоков, содержащих код подменю. В результате получим 
пять функций: 
Ғџпсбіоп Маіп() { М 
.десЕ1епепеВута("шаіп") .всу1е.уівірі14суч'уівір1е' 
доситепё .сесЕ1етепеВуІа ( "поуіе") .вбу1е.уіѕірі1ісу= 'Һіадеп' 
доситепе .дерЕ1етепіВуІа( "ізѕџе") .збуІе.уізірі1ібу= 'Һіддеп' 
досшпепе .десЕ1етепеВуІа( "эшгуеу") .су1е.уіѕірії1ісу='Һіддеп' 
досшпепе .ЧеЕЕ1етепеВуІа ( * огшп") .зсу1е.уізірії1ісу='Һіддеп' 
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Єопсбіоп Мо\4е() { 

досштепе .декЕ1етепЕВуТа("тазп"} .ѕсу1е.уіѕвірі1ісу= 'ћіадеп' 
досошепе .дебЕ1епепВуІа("похіе") .веу1е.уівіЫі1ісу= "Ув 
осцпепе .дееЕ1епепеВуІа ( "іззџе") .вбу1е.уіѕірі1ісу= 'ћіадеп' 
досшпепе .декЕ1етепЕВутА("зикуеу") .вбу1е.уіѕірі1ібу= 'Һійдеп' 
досшпепе .десЕ1епепсВута ( " Ёогит") .зсу1е.уіѕірі1ібу= 'Һіддеп' 


Ғопссіоп Іввце() ( 
доситепе .декЕ1етепЕВуТа ("паіп") .зсу1е.уіѕірі1ібу= 'һіадеп' 
ЗосатепЕ .десЕ1епепеВута ( "поуіе") .збу1Іе.уіѕіьі1ібу= 'Һіддеп' 
досињепе .десЕ1ешепеВуїд ("івеџе") .всу1е.уівірі1ібуз'уівіЬ1 
ЧоситепЕ .десЕ1етепеВута ("эигуеу") .збу1е.уіѕірі1ібу= 'ћіддеп' 
Зоситепе .чесЕ1етепсВута ( " Ғогип") .ѕсу1е.уівірі1ісу= 'ћіадеп' 
} 
Ғипссіоп Зогуеу() ( 
оситепе .десЕ1епепсвута( "паіп") .всу1е.уіѕірі1ісу= 'һіадеп' 
доситепе .десЕ1етепеВута ( "поуіе") .ѕсу1е.уівірі1ібу= 'ћіадеп' 
аоситепЕ .аесЕ1етепЕВУТА ("ізѕие") .ѕсу1е.уіѕірі1ібу= 'ћіддеп' 
досопепе .дебЕ1епепеВуІа ("вигуву") .вбу1е.уівірі1ібу='уівіБ] 
доситепё .дебЕІетепеВуТа (" Ғогит") .ѕсу1е.уіѕірі1ібу= 'Һіддеп' 
} 
Ецпссіоп Рокиш() ( 
досштепе .дерЕТетепеВута ("таіп") .зсу1е.уіѕірі1ісу= 'ћіадеп' 
доситепе .деЕЕ1етепЕВУТА ("поуіе") .зСу1е.уіѕірі1ібу= 'ћіддеп' 
Чоситепе .аесЕ1етепіВуІа ("іѕѕие") .зсу1е.уізірі1ібу= 'Һіддеп' 
ЗосштепЕ .деЕЕ1етепЕВУТА ("зикуеу") .збу1е.уіѕірі1ібу= 'ћіадеп' 
доситепе .деЕЕ1ещепЕвВутА ( "охл" ) .всу1е.уівірі1ісу= 'уівір1е' 
} 


Теперь, чтобы меню заработало, нужно указать, в каких случаях написанные нами 
функции должны выполняться. Мы договорились, что подменю будет появляться при 
наведении указателя мыши на пункт основного меню. Таким образом, если пользователь 
подводит указатель к пункту “Фильмы”, то должно появиться подменю #то\1е. Это 
действие выполняет функция ЈауаЅсгірі с именем Моуіе (). 

Нам потребуется добавить к ссылкам в основном меню вызов одноименных функций, 
когда случается событие оплоџѕеоуег, т.е. наведение указателя мыши на ссылку. Допи- 
сать код нужно следующим образом: 
<ОТУ Ір="пепо"> 


<А НКЕЕ="#" оптоцвеоуег="Маію() ">Главная</А>&пЪ5] |&лрѕр; 
<А НКЕҒ="#" опоцвеоуег="Моуіе() ">Фильмы</А>5првр; | |&п0вр; 
<А НВЕЕ="#" оплоцвеоуег="Іввџце() ">Статьи</А>&пЬвр; | | апер; 


<А НВЕР="#" опоцвеоуес="Зигуеу () ">Обзоры</А>&пЬер; | |&пЬѕр; 

<А НВЕР="#" оппоцвеоуег="Еогши() ">Форум</А> 
</0Іу> 

Теперь подменю должны открываться при наведении указателя мыши. Но они долж- 
ны еще и закрываться, когда указатель выходит за пределы меню. Аналогично ведет себя 
и меню Міпаоуѕ. Эту задачу реализовать сложнее, но если хорошенько подумать, то про- 
стое решение найдется. Нам даже не нужно будет писать дополнительных функций на 
Јауа$сгірі. 

Подумайте, в каких случаях указатель мыши оказывается за пределами меню или от- 
крытого подменю — в этом случае он располагается либо над блоком заголовка #һеаа, 
либо над блоком основного содержимого #сопеепе. Значит, решение будет следующим: 
когда курсор находится над блоками #сопсепе или #неаа, нужно опять вызывать функ- 
цию НідеА11 (), и тогда при выходе курсора за пределы подменю оно будет автоматиче- 
ски закрываться. Код блоков нужно изменить следующим образом: 
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<0ІУ Ір="Һеад" отпочвеоуек="Н44ел11 () "> 
<Н1>Все о кино</Н1> 
</ргу> 


<0ІУ Тр="сопЕепе" оппоцвеоуег="НійеА11() "> 
. текст блока .. 
</оту> 


Если вы все сделали правильно, то теперь меню будет полностью функционировать, 
и, что особенно приятно, работать это будет во всех последних версиях браузеров: 
Ілсегпех Ехріогег 6.0, Орега 7.5 и Мог 1.7. 


Если что-то не так, вы можете свериться с полным НТМІ -кодом этого примера, ко- 
торый приведен в приложении Б. 
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Глава 17 
Дополнительные ВОЗМОЖНОСТИ 


В этой главе ... 

Оформление элементов форм при помоши С$$. 
Изменение стиля полосы прокрутки 
Использование нескольких стилей одновременно. 
Создание ссылок-кнопок 


‘Альтернативная таблица стилей для вывода на печать 


м, 26 М Д, і 


Обзор возможностей С$8-редакторов 


Оформление элементов форм при помощи С$$ 


К элементам интерактивной формы, так же как и к любым другим элементам, можно 
применить свое собственное оформление, отличное от того, которое принимается по 
умолчанию в чистом НТМИ.. 

Для начала рассмотрим простую форму, и вспомним, как НТМІ.-формы создаются. 
Ниже приводится НТМТ-код такой формы, где для выравнивания элементов использу- 
‘ется таблица. 


<РОВМ АСТТОМ=" гедіѕсег.р1"> 
<Н1 АГТОМ="сепкег">Регистрационная форма</Н1> 
<ТАВЬЕ АШІСМ="сепбег" СЕШ.РА”ЮІМС="0" СЕЦШ.ЅРАСІМО="0" ВОВБЕВ=“0"> 
<СОЬ АШТОМ-"гідће"><СО АШІСМ="1еғс"> 
<ТВ> 
<ТО>Логин:</ТО> 
<ТБ><ТМРОТ ТУРЕ="ЕехЕ" МАМЕ="1одіп" ЗТРЕ="27"></ТО> 
</тв> 
<тв> 
<тр>Пароль:</т0> 
<ТР><ІМРОТ ТҮРЕ="равзмоса" МАМЕ="равв" ЅІ2Е="27"></Т0> 
</тв> 
<тв> 
<тр></тр> 
<ТО><ТМРОТ ТҮРЕ="гайіо” МАМЕ="адагсуре" УАШЈЕ="Һоте* СНЕСКЕО> домаш- 
нийвпрвр; &пЬвр; 
<ІМРОТ ТҮРЕ="гадіо" МАМЕ="аддгсуре" ҮАШЈЕ="могК"> рабочий 
</т7> 
</тВ> 
<тВ> 
<ТЬ>Адрес:</тр> 
<ТБ><ТЕХТАВЕА С0Ь5="20" ВОИб: 
</тв> 
<тЕ> 
<тр></тр 
<ТО><ТМРОТ ТҮРЕ="сһескЬох" МАМЕ="гепепђеграѕѕ* МАШЈЕ="Запомнить па- 
роль“>Запомнить пароль</Т0> 
</тв> 


" МАМЕ="адах"></ТЕХТАВЕА></ТО> 


<тВ> 

<ТБ СОШЅРАМ="2"><ІМРОТ ТҮРЕ="ѕиопіє" МАМЕ= "виріс" 
УАЦЈЕ="Регистрация">&пЬзр;&пЬзр; 

<ТМРОТ ТҮРЕ="геѕеб" МАМЕ="геѕес" МАЦЈЕ="Очистить"></Тр> 
</тв> 

</ТАВЬЕ> 

</ЕОВМ> 


Основной открываюший тег таблицы следующий: 
<ТАВЬЕ АШІСМ="сепсег" СЕШЈРАРОТМО="5" СЕЦШ.БРАСІМО="0" ВОВРЕВ=“О"> 


Здесь задается выравнивание всей таблицы (а не содержимого конкретных ячеек) по 
центру страницы. Кроме того, задаются нулевые расстояния между ячейками и отступы 
внутри ячеек по 5 пикселей. Также граница вокруг таблицы отключена. 

В таблице две колонки: содержимое первой колонки выравнивается по правому краю, 
содержимое второй — по левому. Чтобы задать выравнивание для всех ячеек в столбце, 
мы воспользовались элементом СОї.. Их у нас два — по количеству столбцов в таблице. 
Поэтому код в начале таблицы: <СО_ АШІСМ= "гісдһе"><СО АТОМ="1еёс"> сооб- 
щает браузеру о том, что в таблице две колонки, содержимое которых должно быть вы- 
ровнено указанным образом. Далее в ячейках таблицы располагается собственно содер- 
жимое формы. Все основные элементы этой формы представлены в табл. 17.1. 


Таблица 17.1. Элементы НТМІ-формы 
Элемент НТМЕ-код 
Текстовое поле для ввода логина <ІМРОТ ТУРЕ="ЕехЕ" МАМЕ="1091п" 517Е="27"> 


Текстовое поля для ввода пароля <ІМРОТ ТҮРЕ="раѕѕмогӣа" МАМЕ="раз5" 512Е="27"> 
(вводимый текст будет отображать- 
ся символами “*") 


Переключатель (радиокнопки) для  <ТМРОТ ТҮРЕ="гадіо" МАМЕ=”ааакеуре” 
выбора типа адреса МАБОЕ="мокКк"> 


Многострочное текстовое поле для  <ТЕХТАВЕА СОГ5="20* ВОИб=“4" МАМЕ-"ааак"> 


ввода адреса </ТЕХТАВЕА> 

Флажок для выбора опции <ТМРОТ ТУРЕ="сНескКЬох“" МАМЕ=“гепепьегразз" 
“запомнить пароль” УАШОЕ="Запомнить пароль"> 

Кнопка отправки содержимого фор- <ТМРОТ ТҮРЕ=" иті" МАМЕ="зирті с" 

мы УАЦЈЕ= "Регистрация" > 


Кнопка сброса введенных значений <ТМРОТ ТҮРЕ="геѕес" МАМЕ= "геѕес" 
УАЦЈЕ="Очистить"> 


Атрибут пате присутствует у всех элементов формы и служит для идентификации 
этого элемента в программе-обработчике данных формы. Атрибут зі 2е задает размеры 
текстовых полей. 

Вот мы и разобрались, что входит в состав нашей формы, а заодно вспомнили ключе- 
вые элементы форм. Теперь попробуем написать для этой странички таблицу стилей. 
Поместим ее внутрь тегов <5ТУБЕ> и </5ТҮГЕ> секции НЕАР, создав, таким образом, 
внутреннюю таблицу стилей. 


Предупреждение! Прежде чем писать таблицу стилей, убедитесь, что директива | 
! РОСТУРЕ вашего документа имеет полную форму, т.е. в ней указан ОКІ.. Это не- 
обходимо, чтобы браузер перешел в режим соответствия используемым стандар- 
там, иначе могут возникнуть проблемы с отображением С55-свойств. 
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Кроме этого. по ходу написания таблицы стилей мы будем вносить коррективы и в 
НТМІ-код, чтобы по возможности полностью разделить содержимое и описание его ви- 
зуального отображения для документа. Без использования таблиц стилей исходная фор- 
ма выглядит так, как показано на рис. 17.1. 


Регистрационная форма 


С домашний С рабочий 


Адрес 
г. 
Г Запомнить пароль 


‘Регистрация | Очистить. 


Рис. 17.1. Исходный вид формы в браузере 


Прежде всего хотелось бы отрегулировать расстояние между объектами формы. Сейчас, 
из-за того что для таблицы установлен атрибут СЕІШ.РАРррІМС= "5", расстояние между объ- 
сктами внутри строки равно 10 пикселей (например, между надписью “Логин:” и самим 
текстовым полем для ввода), что нас в принципе устраивает. Однако расстояние между 
строками также равно 10 пикселей, и вот его хотелось бы сократить. Если просто устано- 
вить значение атрибута СЕБЬРАОРТМС равным 0, то отступов внутри ячеек таблицы не бу- 
дет вовсе, и все элементы вплотную примкнуг друг к другу, как показано на рис. 17.2. 


Регистрационная форма 


Логин{ 
Пароль 
С домашний С рабочий 
Адрес 
м 
Г Запомнить пароль 


Регистрация| Очистить | 


Рис. 17.2. Расстояние между объектами 
формы отсутствует 


Исправить ситуацию можно при помощи С$$ и свойства радаіпо, которое позволя- 
ет задать разные значения для отступов с каждой из четырех сторон. Поскольку нам тре- 
буется отрегулировать отступы внутри ячеек, в качестве селектора может выступать на- 
звание элемента Тр. Но в этом случае правило будет применяться ко всем таблицам 
вданном НТМІ -документе, тогда как для других таблиц могут потребоваться совсем 
другие параметры и стиль оформления. Поэтому здесь уместнее воспользоваться контек- 
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стным селектором — например, ЕОВМ Тр. В этом случае указанное правило будет отно- 
ситься только к тем таблицам, которые находятся внутри формы, и не будет затрагивать 
остальных таблиц документа. 

Контекстный селектор ЕОЕМ ТР в данном случае “перескакивает” через несколько эле- 
ментов в дереве элементов документа. Иерархия элементов здесь такова: ЕОБМЕ>ТАВЬЕР 
'тЕТР), но контекстный селектор позволяет пропустить в иерархии два элемента (ТАВІЕ 
и ТВ) для достижения желаемого результата. 


Примечание. В С$$ 2 есть селектор, который обозначает непосредственного предка 
| элемента. Записывается он следующим образом: ЕОВМ>ТАВЬЕ или ТЕ>ТО. В пер- 
| вом случае С$$-правило будет применяться к таблицам, находящимся непосредст- 
венно внутри тегов <ЕОВМ></РОВМ>. А если конструкция будет отличаться, на- 
пример будет следующей: 
<РОВМ 
<РТУ АБТСМ=“сепкег“> 
<ТАВЬЕ> 
— код таблицы. 
</ТАВЬЕ 
</рту> 
</ЕОВМ> 


то данное правило к таблице уже применяться не будет, поскольку элемент ТАВЬЕ 
в этом случае является непосредственным потомком элемента Оту, а не ЕОБМ. 


Второй селектор ТВ>ТО, по сути, смысла не несет, поскольку все элементы Тр явля- 
ются непосредственными потомками элемента ТВ. 

Все бы хорошо. только такой селектор поддерживается не всеми браузерами, в част- 
ности его не поддерживает Тлегпеї Ехріогег, поэтому на практике его применение сильно 
ограничено. Одна из областей применения такого селектора заключается в написании 
кроссбраузерного С55 по метолу Целика, который мы рассматривали ранее. 

Итак, чтобы наше правило коснулось только нужной таблицы и чтобы не вводить но- 
вый класс, будем использовать контекстный селектор ЕОБМ Тр. Получим правило: 

РОВМ ТЮ ( 
радӣӢіпд: 2рх 5рх; 
) 
которое устанавливает отступы сверху и снизу по 2 пикселя, а справа и слева по 5 пикселей. 

Кроме отступов, также требуется задать вертикальное выравнивание для ячеек по верхне- 

му краю, чтобы слово “Адрес:” располагалось не по центру, как сейчас (это значение по умол- 


чанию), ау верхнего края ячейки. Для этого воспользуемся свойством уегЕ1са1-а1 19: 
РОМ ТО{ 

райдіпд:2рх 5рх; 

уегбіса1-аїїісп: вор; 


Теперь самые очевидные недостатки формы устранены, и можно приступать к ес 
оформлению. Будем исходить из предположения, что все формы на нашем сайте должны 
быть оформлены одинаково, поэтому везде будем использовать селекторы по элементу. 

Займемся формой в целом. Чтобы изменить параметры шрифта, фона и прочие пара- 
метры для формы в целом, в качестве селектора лля С$$-правила следует выбрать эле- 
мент ЕОБМ, поскольку именно он содержит все элементы формы и вспомогательные эле- 
менты вроде таблицы и заголовка. Давайте попробуем оформить нашу форму в желто- 
коричневых тонах. 
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РОВМ{ 
со1ох: #663300; 
Басксгоцпа: #ЕРЕЕСС; 
Ғопе: 0.Вет Уегдапа, Агіа1, ѕапз-ѕегіё; 


Этим правилом задалим темно-коричневый цвет текста и светло-желтый фон для 
всей формы в целом, причем фон будет распространяться на всю ширину формы. Сейчас 
ширина явно не указана и ничем не ограничена, соответственно, ширина формы сейчас 
равна 100% ширины контейнера. Контейнером для нашей формы служит окно браузера. 
Темно-коричневого цвета будут все надписи в форме: заголовок и текст внутри ячеек 
таблицы. Используемая гарнитура Уегдапа имеет крупные буквы, и для того чтобы текст 
выглядел аккуратнее, мы пропорционально уменьшили размеры шрифта в форме, ис- 
пользуя относительную единицу измерения ет, равную высоте строки текущего шрифта. 
Значение 0 . Вет позволит нам на 20% уменьшить размер букв, при этом для пользовате- 
лей Ичегле! Ехріогег сохранится возможность изменить размер шрифта непосредственно 
в браузере. 

В том случае, когда требуется изменить цвет только заголовка формы, а основной 
текст формы оставить черным, свойство со] ох следует перенести в правило с контекст- 
ным селектором гОВМ Н1. В результате получим два правила: 

РОВМ{ 

Баскакоипа: #ЕРЕРСС; 

ЕопЕ: 0.Вет Мегдапа, Агіа1, вапз-вег1; 
дови н1{ 

со1ог: #663300; 

} 


Теперь заголовок будет коричневым, а основной текст в форме — черным. 

Вернемся к рассмотрению фона формы, который сейчас желтый и распространяется на 
всю ширину окна браузера. Если ограничить ширину формы, задав свойство из АЕ, то фон 
будет ограничиваться новой шириной. Укажем для формы некоторое ограниченное значе- 
ние по ширине, например 500 пикселей, добавив свойство міаєћ к стилю формы: 

БОВМ{ 
Ъаскакомпа: #РРЕЕЕСС; 


ЕопЕ: 0.Вет Уекаапа, Агіа1, вапз-вегіё; 
міаећ: 500рх; 


При этом вы заметите, что теперь фон соответствует указанной ширине, но, кроме 
того, в браузере “сбилось” выравнивание формы: раньше она располагалась по центру, 
а тсперь у левого края. Давайте разбираться, что произошло? 

Изначально выравнивание элементов формы задавалось атрибутом АЪТОМ="сепеек" 
элементов ТАВЬЕ и Н1. Выполнялось выравнивание относительно контейнера ЕОКМ, ши- 
рина которого была равна 100% окна браузера. Теперь мы ограничили ширину формы 
500 пикселями, и выравнивание осуществляется относительно новой ширины. Чтобы рас- 
положить форму по центру страницы, необходимо задать выравнивание для блока самой 
формы, т.е. элемента ЕОВМ. 

В С55 есть только одно свойство, отвечающее за горизонтальное выравнивание текста, — 
это сехі-а11оп. Оно задает выравнивание содержимого блока, содержимого его контентной 
части. Оно подойдет нам для того, чтобы избавиться от атрибута А.ІСМ="сепсег" элемента 
ТАВЬЕ, поскольку он помечен в спецификации НТМІ. как нежелательный для использова- 
ния. Поэтому в С$$ правило для селектора ЕОЕМ лучше дополнить этим свойством, а атрибут 
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АГЛСМ="сепбег" из кода элементов ТАВЫЕ и Н1 убрать совсем. Аналогично можно 
“расправиться” с атрибутами а1 1 дп элементов СОІ.. 
<СОТ, АГТСМ=“Е19ВЕ"><СОЬ АШІСМ="1еғс"> 


Вспомним, что выравнивание по левому краю является значением по умолчанию, по- 
этому во втором случае его можно безболезненно опустить. А для первого случая в табли- 
цу стилей придется добавить правило, описывающее способ выравнивания. Кроме этого, 
придется организовать класс, поскольку в нашей форме встречаются столбцы с выравни- 
ванием двух типов: по левому и правому краю. Организуем два универсальных класса 
„.кзореи .1еЕе: 


„1еЕе{ 
сехЕ-а119п:1еЕе; 
} 


„кааНЕ{ 

Сехс-а1ісп:гічће; 
} 

В НТМЕ-код придется внести следующие изменения: 
«СО СІАЅ5= *гідһЕ"><С01, СЬАЗ5="1еЕЕ"> 


В будущем эти классы можно будет использовать для задания выравнивания любых 
элементов, достаточно в них прописать атрибут с1азз и указать соответствующее назва- 
ние класса. 

Теперь в нашем НТМТ-коде не осталось “нежелательных” атрибутов. Вернемся к вы- 
равниванию формы на странице. Казалось бы, С$$ нам не сможет помочь отцентриро- 
вать блок ЕОБМ на странице. Атрибута а1ісп у элемента ЕОКМ тоже нет. Можно, конеч- 
но, все содержимое формы поместить внутрь тегов <рту АГТСМ="сепсек"></От\>, но 
тогда мы нарушим принцип разделения структуры и визуального оформления, тем более 
что в С85 выход все же есть. 

Для центрирования блока на странице нам поможет свойство пагсіп и его значение 
ацсо. Дело в том, что при использовании значения аџсо поля блока вычисляются оди- 
наково с каждой стороны, что и выравнивает блок по центру контейнера. Тогда правило 
для селектора ҒОВМ примет вид: 

РОВМ{ 

Ъаскакоила: НЕЕРЕСС; 

ЕопЕ: 0.8ем Чегдапа, Аг1а1, ѕапѕ-ѕегіѓ; 

ЕехЕ-а149п: сепбег; 

тагдіп: ацсо; 

міаєћ: 500рх; 


После всех этих манипуляций в браузере Орега и Мох а, как вы можете увидеть сами, 
элементы формы (т.е. содержимое нашей внутренней таблицы) остались выровнены по 
левому краю. 

Чтобы исправить эту ситуацию, можно по аналогии с классами .Л1еғє и . сісћ вве- 
сти класс .сепсег такого вида: 


„.сепеех{ 
пага1п:амео; 


} 
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Рис. 17.3. В браузере МогШа наши попытки выравнивания элементов формы результа- 
та не дали 


Теперь для таблицы можно указать этот класс вместо использования атрибута 
а1ісп="сепбег": 
<ТАВЬЕ СІАЅ5="сепсег" СЕШ.РАРОІМО="0" СЕШ.ЅРАСІМС="0" ВОВОЕВ="0"> 

— код таблицы =. 
</ТАВЬЕ> 

В результате выравнивание будет выполняться правильно везде и для всех элементов 
формы. 

Вернемся к оформлению элементов формы. Для каждого из них можно задать цвет 
фона, границы, размер, параметры шрифта — т.е. любые параметры, которые можно за- 
дать с помощью свойств С5$. На первом этапе нам предстоит выбрать способ выбора се- 
лекторов для написания таблицы стилей для формы. Сложность в том, что большинство 
элементов создается с помощью элемента ТМРОТ и отличаются они лишь значением ат- 
рибута суре. 

В этом случае нам бы очень пригодился селектор из спецификации С$$ 3, позволяю- 
щий применять правило к элементу с олределенным значением атрибута. Но, к сожале- 
нию, такого селектора в нашем распоряжении нет, поэтому придется создавать классы. 
Например, в отдельный класс можно выделить текстовые поля: однострочные и много- 
строчные, а также поле ввода пароля. Создадим для них отдельный класс, назовем его 
Сехе, и запишем правило для этого класса: 

. вехе{ 
ЪБаскакоцаа: #ЕРЕЅЕЄ; 


со1ог: #696969; 
Богаек: 1рх 1пвеЕ #А0522р; 


Как видите, правило очень простое. Оно определяет цвет фона текстовых полей 
и цвет текста, который будет вводить в эти поля пользователь. Кроме того, задается тон- 
кая граница типа іпѕеё, т. е. поля будут немного “вдавлены” в форму. Для того чтобы 
увидеть этот эффект в браузере, необходимо прописать атрибут с1азз="ЕехЕ" во всех 
элементах, определяющих текстовые поля. Их у нас три: 
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<ТМРОТ ТУРЕ="ЕехЕ" МАМЕ-"1одіп" 5І2Е="27" славв="Еехе"> 
<ТМРОТ ТҮРЕ="раѕѕмогӣа" МАМЕ="раѕѕ" $Т2Е="27" с1авн="Еехе"> 
<ТЕХТАВЕА СОГ5="20" ВОМЗ=“4“ МАМЕ- "абӣг" сзавв="Еехе"></ТЕХТАВЕА> 


После этих изменений соответствующим образом поменяется и форма (рис. 17.4). 


| Регистрационная форма 
| и ===] 
а, 

| 

| 


Адрес: 


4 


Г запомнить пароль 


__бзетанаш] ронена 


Рис. 17.4. Новый вид текстовых полей формы 


| 


88 


В принципе, аналогичным образом можно поменять внешний вид любых элементов 
формы, например кнопок. Сейчас они станлартные, серые и скучные. Их пвет и оформ- 
ление также легко поменять с помощью С5$. Давайте создадим класс риєсоп и опреде- 
лим в нем стиль кнопок формы. 

Ьоссоп{ 

Баскагоипа: #660000; 

Ђогӣег: 1рх оцевеЕ #405220; 

со1ог: #РЕР; 

Еопе-меієће:Ьо1а; 


Данный стиль определяет красно-коричневый фон кнопок, белый полужирный текст 
надписей на них и выпуклую границу. Укажем атрибут с1аз: иссоп" в коде элемен- 
тов, определяющих кнопки: 


<ІМРОТ ТҮРЕ="зиртіб" МАМЕ="зуртіс" УАЦЈЕ=" Регистрация" с1авв="Ьсесоп"> 
<ІМРОТ ТҮРЕ="геѕес" МАМЕ="геѕеб" ҮАШЈЕ= "Очистить" с1авв="ЬаЕЕоп"> 


В результате кнопки формы изменят вид на описанный в стиле (рис. 17.5). 


Регистрационная форма | 
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Логин: 
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| 
| 
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Рис. 17.5. Новый вид кнопок формы 
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Как видите, проявив фантазию и применив уже имеющиеся знания о С$$, можно 
оживить обычную МеБ-форму, что, несомненно, добавит привлекательности любой У\еЬ- 
странице. 


Изменение стиля полосы прокрутки 


При изучении НТМІ. уже говорилось о том, что разные производители браузеров 
включали в свои браузеры поддержку тегов, которые не относились к официальной спе- 
цификации языка НТМГ. В связи с этим наблюдались некоторые разногласия в под- 
держке тегов. После создания стандартов и написания спецификаций ситуация улучши- 
лась, поскольку основной набор поддерживаемых тегов все-таки был примерно одина- 
ков. В случае с С$$ также есть некоторые свойства, поддержка которых введена 
‘разработчиками только в браузерах собственного производства. 

Например, в браузерах фирмы Мгсгозой, начиная с версии 5.5, введены некоторые 
свойства, поддержки которых просто нет в других браузерах, поскольку эти свойства не 
входят в официальную спецификацию С$$. С их помощью, например, можно устанавли- 
вать цвета полос прокрутки в браузере щегпе Ехр/огег 5.5 и выше. 

Вы наверняка встречали такие страницы. Как правило, оформление полосы прокрут- 
ки у них значительно отличается от классической схемы, т.е. от традиционного серого 
цвета. Цвет полосы меняется в соответствии с общей цветовой гаммой сайта. Рассмотрим 
свойства, позволяющие изменить вид полосы прокрутки (рис. 17.6), — каждое из них от- 
вечает за цвет отдельного элемента. 


= зспоагагаск-союг 


асгодоагчагом-соог 


Рис. 17.6. Свойства для зада- 
ния стиля полосы прокрутки 


• Бсго11баг-38-1ісһе-со1ог — цвет блика ползунка, который располагается на 
левой и верхней сторонах бегунка и стрелок (по умолчанию белый). 

е ѕсго11раү-аггом-со1ог — цвет стрелок прокрутки (по умолчанию черный). 

ө эсго Ьак-Базе-со1ох — основной цвет самой полосы (по умолчанию серый). 

ө зско11рак-аахк-зра@ом-со1охг — цвет для тени, которая располагается на 
правой и нижней сторонах бегунка и стрелок (по умолчанию черный). 

• зсго]1Ьахг-ЁЕасе-со1ох — основной цвет для стрелок и бегунка (по умолчанию 
серый). 

® ссго11Ьаг-һідһ1ісҺе-со1ог — цвет блика на полосе прокрутки. 

® 5сго11раг-ѕћадои-со1ог — цветтени на полосе прокрутки. 

® вско]ЛЬахг-Ехаск-со1ох — цвет фона полосы прокрутки. 
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Все указанные свойства не относятся к официальной спецификации С55, поэтому не 
поддерживаются никакими лругими браузерами, которые их просто игнорируют. Однако 
это не мешаст их использовать, — просто в остальных браузерах полоса прокрутки будет 
выглядеть обычно. 

Приведем пример кода для измененной полосы прокрутки, предназначенной для сай- 
та фирмы “ДОМ”, который мы создавали ранее в главе 16. 
вору { 

зсго11Ьаг-3а-1і9ћЕ-со1ог:#Р9РОЮЕ; 

ѕсго11раг-аггом-со1ог:#330; 

ѕсго11Ьаг-Баѕе-со1ог:#996; 

ѕсго11раг-дагк-ѕһадон-со1ог:#960; 

всго11Ьаг-Еасе-со1ох: #085482; 

ѕсго11Баг-ћієћ1ісһс-со1ог:#РӘРОРрЕ; 

ѕсго11раг-зћадом-со1ог: #080482; 

эсго11раг-Егаск-со1ог: ЕЕС; 


Попробуйте задать такие цвета или придумайте свои собственные. Можно попробо- 
вать для начала задать очень яркие цвета, чтобы сразу увидеть изменения, а затем уже по- 
добрать более подходящие к вашему документу оттенки. 

В дальнейших разделах рассмотрим еще несколько хитростей С55, которые могут 
пригодиться в работе. 


Использование нескольких стилей одновременно 


Рассмотрим простой пример. Допустим, в вашей таблице стилей есть несколько пра- 
вил: 


Леғц 
Сехі-а1ісп:1еѓє; 


1] 
гіс 
сехі-а1ісп:гісће; 
} 
-агееп{ 
со1ог: ахееп; 
Богдег: 1рх ѕо1іа ахееп; 
} 
.гев{ 
со1ог: гей; 
ЪБогаек: 1рх ѕо1іа гей; 
} 
-Б1џе( 
со1ог: Ыме; 
Ъогдег: 1рх во1ій Ыше; 
} 
„пакггом { 
міаеєп:50% 
} 


А теперь представьте, что необходимо создать блок шириной 50% контейнера, выров- 
ненный по правому краю. Как быть? Можно написать новый стиль вида: 


-паг_гічће( 
міаеп:50%; 
Сехі-а1ісп:гіс; 


А можно ли поступить по-другому? На самом деле все гораздо проще. Вы можете просто 
указать в качестве значения атрибута с1аѕѕ несколько имен классов через символ пробела, 
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тогда правила, написанные для этих классов, объединятся. Например, чтобы создать блок 
шириной 50% контейнера, выровненный по правому краю, достаточно написать: 


<Р с1авз="Е19ВЕ паггои">Этот параграф шириной в 50% контейнера будет выровнен 
по правому краю</Р> 


Приведем еще несколько примеров подобных комбинаций: 
<Р с1авв="гієћо Ьце">Этот параграф будет синим и выровнен по правому 
краю</Р> 
<р с1аѕѕ="гей паггом гісћі">Этот параграф будет красным и узким, текст выров- 
нен по правому краю</Р> 


<Р с1азз="огееп Іеѓс">Этот параграф будет зеленым и выровнен по левому 
краю</Р> 


В браузере увилим все эти абзацы так, как показано на рис. 17.7. 


Этот параграф будет 
шириной в 50% 
контейнера и выровнен 
по правому краю 


"Этот параграф будет синим и выровнен по прав. =] 
крак 


параграф 


расным и уно тек 
выровнен по правом 


80 


т параграф Будет зеленым и выровнен 


Краю 


Рис. 17.7. Отображение комбинаций классов 
в браузере 


Из этого примера видно, что свойства прекрасно объединяются и без явного объеди- 
нения стилей. Кроме того, комбинировать можно не только лва, но и три стиля. Главное 
следить за тем, чтобы в одном стиле какие-то свойства не переопределяли другие, иначе 
можно получить неожиданный результат. 


Создание ссылок-кнопок 


С помощью таблиц стилей можно превратить обычные ссылки в кнопки, т.е. они бу- 
дут простыми текстовыми ссылками, а отображаться в браузере будут как кнопки. 

Весь фокус заключается в том, что для ссылок в обычном состоянии залается стиль, ими- 
тирующий выпуклую кнопку. Определяются фон. рамка и цвет текста. Эффект “выпуклости” 
достигается подбором цвета границ. Когда кнопка выпуклая, ее верхняя илевая границы 
‘должны быть светлее по тону, чем нижняя и правая, когда кнопка выбирается (на нее наво- 
дится курсор), цвета границ меняются и кажется, что происходит “нажатие” кнопки. Для цве- 
та границ лучше всего оттенки серого, они по тону подходят к любому цвету, какой бы вы ни 
указали для кнопки. При этом ссылка остается ссылкой, а не кнопкой. 

Проиллюстрируем сказанное на примере. Запишем стиль для ссылки в обычном со- 
стоянии: 


А 


Ъаскагошпа: #0099ЕЕ 
Богдег-бор: 1рх во1іа #050505; 
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Ьогдег-1өғє: 1рх во144 #050505; 
Ъогдег-Ьобсош: 1рх во1ійа #4Е4Е4Е; 
Ъогдег-гібће: 1рх в0144 #4Е6ЕбЕ; 
со1ог:#РЕЕЕ99; 

ЕопЕ: 0.Веп Тавоша, ѕапз-вегіё; 
сехі-десогасіоп:попе; 

рада1та: 2рх 5рх; 


А теперь для ссылки во время наведения на нее курсора мыши меняем местами цвета 
границ: 
А:һоуег{ 

Ъогӣег-сор: 1рх во1ій #4Е4Е4Е; 

Ъог4ек-1е2Е: 1рх во1іа #4Е4Е4Е; 

Ъогӣег-Босбош: 1рх во1ій #050505; 

Ъогӣег-гідЬс: 1рх во14а #050505; 


Запишем код нескольких ссылок, чтобы посмотреть на результат: 


НВЕР="#">Главная</А> 
"#">О компании</А> 
*#">Продукция</А> 
<А НВЕР="#">Галерея</А> 


При этом вы получите очень интересный эффект (рис. 17.8). 


БЕ ЕР т 


Рис. 17.8. При наведении указателя на кнопку меняются цвета ее гра- 
ниц, чем имитируется “нажатие” кнопки 


Альтернативная таблица стилей для вывода 
на печать 


Наверняка, на многих сайтах, публикующих большие объемы текстовой информа- 
ции, вы встречали ссылку на версию для печати. Что же собой представляет “версия для 
печати”? 

При распечатке сайтов, если вы когда-либо пробовали это делать, распечатывается не 
только интересуюшая посетителя текстовая и графическая информация, но и другие по- 
сторонние для данного случая элементы, такие как заголовок сайта, навигационное ме- 
ню, баннеры и т.п. В тех случаях, когда мы просто хотим распечатать материал с сайта, 
чтобы потом спокойно почитать его, отключившись от Интернет, навигация и прочие 
онлайновые вещи нам ни к чему. Поэтому и делают специальную версию для печати, ко- 
торая представляет собой не что иное, как исключительно текстовый материал сайта, 
и ничего лишнего. 

Раньше для создания “версий для печати” приходилось буквально создавать отдель- 
ный НТМЕ-документ, который не содержал никаких лишних элементов, кроме собст- 
венно основного содержимого страницы. Использование таблиц стилей значительно уп- 
ростило эту ситуацию: мы можем создать отдельную таблицу стилей для вывода докумен- 
та на печать. В обычном экранном режиме будет работать основная таблица стилей, а при 
попытке вывода документа на печать будет подключаться другая. 
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Как это делается и как должны выглядеть таблицы стилей в этом случае, мы сейчас 
и попробуем разобрать на конкретном примере. Помните сайт фирмы “Дом”, который 
мы делали с помошью абсолютного позиционирования в главе 16? Напомню, что полный 
код примера можно посмотретьв приложении Б. Там было четыре основных блока: заго- 
ловок страницы, блок меню, блок содержимого и блок баннеров (рис 17.9). Очевидно, 
что для вывода на печать нужно оставить только один блок основного содержимого, все 
остальные блоки печатать не нужно. 


Строительная фирма "ДОМ" 


Строн 


юизвод 


продаем 


Фирма Дом” образовалась в 1998 году и с тех пор 
енн занимает лидирующее место на рынке строительства и 
отделочных материалов 


Первоначально предполагалось оказание услуг по 
строительству, ремонту квартир и сдаче помещений 
“под ключ" Но в последствие стало понятно, что 
оказание комплекса услуг по подбору строительных и 
отделочных материалов, а также сантехники наиболее 
интересно клненту 


Фирма "Донг имеет „расположенныхв 
разных районах города В нихвы можете найти все 

для вашего дома, начиная с отделочных материалов и 
заканчивая мебелью и аксессуарами 


Наши опытные дизайнеры помогут Вам сделать 
выбор При необходимости возможно компьютерное 
моделирование и перепланировка квартиры 


Рис. 17.9. Вид сайта фирмы “Дом” в браузере 


Для начала вспомним, как можно подключить к документу другую таблицу стилей. 
При подключении внешней таблицы стилей с помощью элемента ЪТМК есть специаль- 
ный атрибут тедјіа, который указывает тип устройства вывода, для которого создана 
таблица. Таким образом, можно написать отдельную таблицу стилей для печати и под- 
ключить се к документу следующим образом: 
<ГЛЬК ге1="вбуІеѕћееб" Куре="ЕехЕ/св5" ВхеЁ=“резпЕ.св5" шейіа="ргіп"> 


Теперь понятно, что эта таблица стилей предназначена для принтера, осталось соз- 
лать ее и поместить в отдельный файл ре1пе.с5$. Кратко напомню структуру того 
НТМЕ-документа, который мы хотим распечатать: 


<вору> 
<0ту ід="Һеай"> 
-. Заголовок документа .. 


</оту> 
<0Ту іа="тепи"> 
— Навигационное меню... 


</01у> 
«рту ід="сопбепе"> 

— Основное содержимое документа 
</рт\> 
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<01у 19="Баплехг"> 


„Блок баннеров и кнопок -. 


</0ту> 
</ворү> 


Для того чтобы получить хороший печатный документ, нам необходимы только назва- 
ние сайта и содержимое основного текстового блока. Что же булет выводиться на печать 
сейчас? Это можно узнать, воспользовавшись командой предварительного просмотра (Рип 
Ргеміем) в браузере. Как правило, она находится в главном меню Файл. Легко убедиться, 
что на печать выводятся все текстовые блоки и рисунки. Фоновые изображения и заливки 
не печатаются. Для нашего примера картина будет такой, как показано на рис. 17.10. 


коз ДОМ 


Тада Той 


Строительная фирма "ДОМ" 


Строим, производим, продаем 


Фра "Дим "оброозалк з 1998 дуже тех гор 
сазоокзетпадируюшке место пе раро строительства 
кошл мат риалов 


Перроначальн предлолаголоса овазьюие узлугпо 
ст ремонту коярткр к сдаче помещики 
"под кпоч” Во в платно толо попити, «то 
отэе окила атг по подборустоятьлак: к 
далоил атериал, а таже санти кабе 
закторосто лету 


Фри "Дож" киет стэ ползли, расположенных в 
разных районах торола В юх вы можете зайти псе 
пхвашиго дома, мухнья С отдалочкыз матерналь 
залагал ебад хаж ессуврани. 


Наши опытные десидиеры поогут Ван соалоть 
выбор. При пес ходкности возм онло хоипьютерноя 
тоделуроватае и пере планкровка клертри. 


"Добавим еше осн параграф тукеть, чтобы: 
проверить переголияние бло, 


Рис. 17.10. НТМІ.-страница в режиме предварительного 
просмотра печати 


Как вы видите, на печати также будут присутствовать меню и блок баннеров, которые 
нам совсем ни к чему. Однако от них очень просто избавиться, — достаточно записать в 
таблицу стилей для принтера правила, удаляющие эти блоки. Вспомним, что свойство 
91эр1ау:попе именно это и делает — блоки с таким свойством изымаются из потока эле- 
ментов. Соответственно, для двух блоков тепи и Баппег необходимо написать правила: 


#тепи( 
91вр1ау:попе ; 
} 


#Баплек{ 
аївр1ау:попе ; 

} 

#һеаас 
діѕр1ау:попе; 

} 


Тогда на печать эти блоки выволиться уже не будут, и в режиме предварительного. 
просмотра мы увидим страницу так, как показано на рис. 17.11. 
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` Фирма ДОМ. Раде 11 


щека "Де оброовальь в 1958 тпукс тех гор 
завюрет люрерующее жестока рык строительства, 
котаелочюх татарин 


Пернонаҳально предшлагикеь олок услугто 

релокту квартир сдаче помещений 
“подзлюч Йов последние стало понти, что 
сасе кожлехся услуг по подбору строительных и 
‘отеготоных жатериалов, а тьюке саитехкики ныболе 
заперт ленту 


Фирма "Дон" шьет ол. ассо, ретолжекных в 
резких рейстах порога. В юа вы молете пайти все 
плявашего рома, тичктя с отпелочкых отеркалоь и. 
знаичитяжибалью мажеессуцрими. 


Наши опыте пюзйнры помогут Вам ствлать 
выбор При зеобкокиости возможно комтьклерное 
оделирозаҳие и перепланировка квартиры 


Добазллюм ен син парагриђ текста, чтобы. 
проверить пе реполинние баса. 


Рис. 17.11. Предварительный просмотр страницы без лишних 


блоков 


Как видите, блоки заголовка, меню и баннеров больше на печать не выводятся, имен- 
но этого мы и добивались. Но блок основного содержимого не заполняет всю ширину 
листа и расположен так же, как был представлен в окне браузера. Мы позиционировали 
его абсолютно со смещением 143 пикселя от левого края контейнера. Кроме того, была 
ограничена ширина блока. Для того чтобы наш блок теперь располагался на всю ширину 
листа, необходимо переписать С$$-правило и для этого блока. Тогда вид страницы при 
печати значительно улучшится. Требуемое правило булет таким: 


#сопеепе ( 


роѕібіоп: абзо1мее; 


Лее: Орх; 


міаєћ: 100%; 


После таких преобразований в режиме предварительного просмотра и, соответствен- 
но, на печати мы увидим страницу так, как показано на рис. 17.12. 


` Фирма ДОМ Роке 1071 


Фрна "Дам" обреолиь в 1998 одужстех порзажюныт икцирующее место за риши 
строительстве и отеканых затирвалов 


Первоначально преллодтгалось оказание услуг по строжучьству, рожокту кзертири сдаче 
асиешаниӣ “под ключ” Но в последствие стало поижтно, что окюзхие кожтпекга услуг по 
праборустроктельных иотоелочоош материалом, а тосе сате заболе китерк во, 
нету 


Фирка "Дон" жет ат респоловчкных в рых работах порока В нах вы 
можете пайти вое плявашего ож, чих с отдылочкы: материалов и залатыя 
мебелью и месессуарам 


Били опыте» пкаиеры помогут Вам спела забор При необколумости комежио 
ожтоюттриое козвлироване и переллалирсана пзарткры 


Добаалл мешт опик параграф техст, чтобы проверить переполюе кие блока. 


Рис. 17.12. Окончательный вид документа на печати 
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Следует сделать последнее замечание: при написании таблицы стилей для принтера ее 
следует подключать после основной таблицы стилей для браузера, иначе правила из ос- 
новной таблицы стилей могут переопределить правила, заданные в таблице стилей для 
принтера. 

Например, если ваша таблица располагается между тегами <ЗТУБЕ></5ТУБЕ>, то 
только после них следует писать: 
<ЫІМК ге1="ѕбу1еѕћееб" Куре-"КехЕ/свз" һгеғ=*ргіпё.свѕ" педфа="ре1пе“> 


Если же обе таблицы стилей находятся во внешних файлах, то последовательность 
подключения должна быть следующей: 


ѕсу1еѕћеес" суре="сехе/с=в" Вке: 
ѕсу1езһеес" куре=“сехЕ/сзз“ һе 


Ыгомвег.свв"> 
ргіпс.свз" педіа="рғіпє"> 


Теперь вам не придется специально верстать “версии для печати”, — любой пользова- 
тель сможет легко распечатать вашу страницу без дополнительных усилий с его и вашей 
стороны. 


Обзор возможностей С5$-редакторов 


Для упрощения создания, просмотра и редактирования таблиц стилей существует це- 
лый класс программ, называемых С$5-редакторами. Как вы понимаете, создавать табли- 
цу стилей можно хоть в программе Блокнот, вволя необходимые правила и сохраняя го- 
товую таблицу в файле. Но есть средства, которые могут помочь вам при работе с табли- 
цами стилей. Рассмотрим основные возможности С$$-редакторов на примере 
программы Торе 1ще 2.0, окно которой показано на рис. 17.13. 


2105 
Выбор доступных свойств]. 
Баскогоцпо: ші! абв. 69.0000 А-у ФӨСАҒ - 
эбетаовошью. раа 0 отареын #9сАЕО2 
зто бъ сою жеае ВСЯ : Ц Ре 
зогон аг: отоке соќит #330, @ ее! 


тоаг. бое соіог#996; ооо Е 


Баскасцічіосћтепі 


"Боско сах 


и г Область һелә | Область 

а гонан 

я редактирования ежроюнее | СЗЗ-СВОЙСТВ 
8 Ьем 


9 
баскдгошпа и!0тарезћосѕе ро) почторва жЕ, ома 
Һан 1 Зем ТӨС 


Сопіехіша] #сопем Р 
"Сетежниа #сопет А 


Рис. 17.13. Окно редактора Тор$1уіе йе 2.0 
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В области редактирования можно набирать правила вручную, как в обычном тексто- 
вом редакторе, или пользоваться подсказками и выбирать нужные свойства из списка 
доступных, который появляется при переходе на новую строку (рис. 17.14). 


х) по-гереаі жее; 


Рис. 17.14. Список доступных свойств 


После того как появился этот список, вы можете просто набрать несколько первых 
букв имени свойства, и список автоматически прокрутится на нужную позицию, оста- 
нется только нажать клавишу <Епіег>, чтобы свойство появилось в области редактиро- 
вания полностью. Аналогично предлагаются варианты значений свойств. 

Еще один способ создать правило для какого-то селектора — выбрать нужные значе- 
ния для свойств в области С$5$-свойств, расположенной справа. Перечень свойств в этой 
области регулируется списком доступных свойств. Им очень удобно пользоваться, когда 
вы не знаете, поддерживается ли некоторое свойство тем или иным браузером. Все свой- 
ства там разбиты на группы. Первыми идут группы спецификаций С$$, начиная со стан- 
дарта С$$ | и заканчивая С55 3. Затем следуют группы свойств, поддерживаемые браузе- 
рами разных производителей, отсортированные по версиям браузеров. Например, нужно 
выяснить, поддерживается ли некое свойство браузером Іпіегпеі Ехріогег 5.0 . Тогда вы 
открываете список свойств для этого браузера и ишете там нужное (рис. 17.15). Если оно 
есть в списке, значит, поддерживается браузером, если свойства нет, значит, браузер его 
не поддерживает. 


Рис. 17.15. Список доступ- 
ных свойств для отдельных 


браузеров 


В самой нижней части окна находится область просмотра, где вы можете увидеть, как 
будет выглядеть в браузере написанный вами стиль. Это очень удобно, поскольку вы за- 
ранее видите, будет ли стиль работать так, как нужно вам. 

Кроме этого, пользуясь С$5-редактором, вы страхуете себя от ошибок и опечаток 
вименах свойств. Все свойства расцвечиваются определенным цветом, и некорректно 
написанные свойство или значения сразу выделяются другим цветом. Их написание 
нужно проверить и исправить. Это значительно упростит вашу работу по поиску и устра- 
нению ошибок в коде. 
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Часть Ш 
Общие вопросы 


В этой части ... 


Глава 18. Графика для Интернет 
Глава 19. Размещение работы в Интернет 


Глава 18 


Графика для Интернет 


В этой главе ... 

> Векторная и растровая графика 
Цветовая модель КСВ 
Безопасные цвета Интернет 


Особенности графики для МеБ 


уууу 


Использование |тавеКеаду для оптимизации изображений 


Пришло время заняться графическими элементами, ведь именно они добавляют при- 
влекательности Међ-страницам и именно они составляют основной объем страниц. Что- 
‘бы научиться оптимизировать изображения, надо постараться лучше понять их природу 
и изучить типичные требования, чем мы сейчас и займемся. 


Векторная и растровая графика 


В общем виде всю компьютерную графику можно разделить на два типа: векторную 
и растровую. Хочется сказать сразу, что для МеБ более критичным является не столько 
формат, сколько качество изображения и размер полученного в результате файла. По- 
этому следует четко понимать, какой из типов компьютерной графики больше подходит 
‚для решения ваших задач. Для этого рассмотрим их по отдельности, а затем сравним. 


Векторная графика 


В векторной графике изображение строится на основе различных линий и кривых, 
которые имеют строгое математическое описание. Кривые разбираются на сегменты, 
и каждый сегмент может иметь свою форму. Форма (изгиб) сегмента определяется типом 
узловых точек, находящихся на концах сегмента. Каждая кривая может иметь свой цвет, 
толщину и другие параметры. Замкнутые кривые могут иметь заливку. Таким образом, 
изображение составляется из множества объектов, имеющих строгое математическое 
описание их свойств, и как раз в таком виде они хранятся в памяти компьютера или фай- 
ле. Именно поэтому векторные изображения являются более компактными с точки зре- 
ния объема занимаемой памяти компьютера. Кроме того, так как все объекты изображе- 
ния четко описаны, не составляет большого труда увеличить или уменьшить их ‘без поте- 
ри качества. Величину векторных изображений можно изменять от размеров почтовой 
марки до огромного постера. 

Примером применения векторной графики могут служить шрифты. Именно благода- 
ря их векторной природе компьютерные шрифты (например, наиболее распространен- 
ные шрифты типа Туре | и ТгиеТуре) не теряют качества независимо от того, какой раз- 
мер установлен для текста. 


Еще один пример использования векторной графики в Интернет — это анимирован- 
ные РИазВ-ролики или даже целые сайты, созданные при помощи Е1аѕћ-технологии. В ос- 
нову этой технологии также положена векторная графика. В результате файлы РазВ- 
роликов получаются небольшие по объему и качество изображения не ухудшается, неза- 
висимо от того, как вы просматриваете ролик: в маленьком окошке или развернув его на 
полный экран монитора. 

Однако при помощи векторной графики невозможно создать фотографически точное 
изображение. Все векторные изображения похожи на нарисованные, — как в мульт- 
фильмах. Хотя, многократно увеличив количество входящих в состав изображения кон- 
туров, можно значительно увеличить его детализацию и сделать более реалистичным. 
При этом неизбежно потребуется и больше времени на компьютерную обработку и вы- 
числения, необходимые для отображения такого изображения на экране монитора или 
‘распечатки его на принтере. Чем сложнее векторное изображение, тем больше вычисли- 
тельных мощностей требуется на его обработку. Каждый раз после изменения размера 
объекта программе векторной графики приходится пересчитывать все его параметры. 

Главные преимущества векторной графики следующие: 


е компактность файлов вследствие математической природы объектов; 
• легкость изменения размеров изображения без потери качества. 


Основные недостатки такие: 
• практически невозможно добиться реалистичности изображения; 


• трудозатраты на создание сколько-нибудь реалистичных изображений колоссаль- 
ны и для этого требуются большие вычислительные мощности. 


Растровая графика 


Растровые изображения хранятся в памяти компьютера совершенно не так, как век- 
торные. Растровое изображение в сущности представляет собой двухмерный массив 
(таблицу) чисел. Элементы этой таблицы называются пикселями (от англ. ріхе! — рсиге 
еетепо. По сути, в памяти компьютера хранится цвет каждого из пикселей, составляю- 
щих изображение. Именно поэтому для хранения таких изображений в памяти требуется 
больше места, чем для хранения текста или векторных изображений. 

Все растровые изображения можно подразделить на две группы — изображения с па- 
литрой и без нее. У изображений с палитрой внутри файла, помимо графических данных, 
отдельно хранится палитра — набор иветов, встречающихся в изображении, описанный 
в виде одномерной послеловательности, каждый элемент которой имеет свой инлекс 
(номер). Иначе говоря, каждый ивет имеет свой номер в общей последовательности цве- 
тов. А в самом пикселе изображения с палитрой хранится не код цвета пикселя, а чис- 
ло — индекс из палитры цветов. Чаще всего встречаются палитры, состоящие из 16, 32, 
64, 128 и 256 иветов. Часто изображения с палитрой называют индексированными. При- 
мером индексированного изображения может служить уже знакомый нам СІЕ-файл изо- 
бражения. 

Изображения без палитры описываются в какой-либо системе цветопредставления, 
позволяющей закодировать определенный цвет в виде числа и записать этот код в каче- 
‘стве значения пикселя. Встречаются черно-белые изображения или, по-другому, изобра- 
жения в градациях серого (вгаузса!е). 

Для изображения в градациях серого значение каждого пикселя обозначает яркость 
соответствующей точки изображения. Для хранения значения яркости отводится ровно 
1 байт, поэтому значение яркости может лежать в пределах от 0 до 255. Здесь 0 — это 
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черный цвет (минимальная яркость), а 255 — белый (максимальная яркость). Встреча- 
ются изображения с 2, 16 и 256 уровнями серого. Изображения с 2 уровнями серого со- 
держат только 2 крайних оттенка серого: белый и черный (рис. 18.1). 


Рис. 18.1. Изображение 
с двумя уровнями серого: 
черный и белый цвет 


Примером изображения, состоящего из 256 уровней серого, может служить обычная 
черно-белая фотография (рис. 18.2). 


Рис. 18.2. Высококачествен- 
ное черно-белое изображение 
(256 градаций серого) 


Для сохранения цветных изображений используются различные системы цветопред- 
ставления. С их помощью каждую точку изображения, т.е. каждый пиксель, можно пред- 
ставить в виде некоторой записи (структуры), поля которой описывают отдельные ком- 
поненты цвета, входящие в эту систему. Самой распространенной является система 
КОВ, в которой цвет представлен значениями интенсивности красного (К), зеленого (С) 
и синего (В) компонентов. Существуют и другие системы цветопредставления, такие как 
СМУК, Гар ит.п. 

В Интернет образцы растровой графики вы видите сплошь и рядом. По сути, практи- 
чески все изображения, помещаемые на МеБ-страницы с помощью элемента ІМС, явля- 
ются растровыми. 

Главные преимущества растровой графики: 


е абсолютная реалистичность изображений; 
• легко монтируются в М№еб-страницу с помощью элемента ІМС. 


Основные недостатки такие: 


~ нельзя менять размер изображения без потери качества; 


• большой объем (но наличие алгоритмов сжатия позволяет сократить размер и сле- 
лать их пригодными для размещения в МеђБ). 
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Сравнительные характеристики 


Растровые и векторные цифровые изображения имеют свои преимущества и недос- 
татки. Рассмотрим их в сравнении. 


1. Растровое изображение получить очень легко. Можно воспользоваться сканером 
или цифровым фотоаппаратом, и изображение готово. Кроме того, растровое изо- 
бражение можно получить из видеозаписи при помощи платы видеозахвата. Век- 
торные изображения создаются вручную, причем это очень кропотливая работа. 
Можно, конечно, получить векторное изображение из растрового путем специаль- 
ной автоматически выполняемой компьютером процедуры — трассировки. Но 
трассировка дает удовлетворительный результат только в случаях с относительно 
простыми изображениями, да и то, полученные таким методом изображения все 
равно практически всегла требуют ручной “доводки”. 


2. Растровые изображения обеспечивают максимальную реалистичность, поскольку 
в цифровую форму переводится каждый мельчайший фрагмент оригинала. Век- 
торные изображения передают крупные фрагменты оригинала с помощью объек- 
тов (контуров с обводками и заливками). Они не в состоянии обеспечить высокую 
реалистичность и максимальную близость изображения к оригиналу. 


3. Растровые изображения имеют большой размер, так как в памяти хранится цвет 
каждого отдельного пикселя, благодаря чему, собственно, и обеспечивается луч- 
шая передача деталей. Векторные изображения более компактны, так как хранят 
только математические описания кривых, составляющих изображение. 


4. Размер растровых изображений растет пропорционально качеству: чем выше каче- 
ство, тем больше размер изображения. Качество векторных изображений не зави- 
сит от их размера, и объем их файла — величина постоянная. 


5. Векторные изображения легко редактировать, поскольку они содержат относи- 
тельно небольшое количество удобно организованных объектов. Растровые изо- 
бражения состоят из множества точек, их редактировать сложнее. Чтобы карди- 
нально изменить растровое изображение, над ним надо много работать. 


Сравнительный анализ показывает, что существование двух типов цифровых изображе- 
ний целиком оправдано. Там, где требуется точность и четкость линий, используют вектор- 
ную графику, атам, где требуется реалистичность уровня фотографии, — растровую. 

Таким образом, добавляя графику на МеБ-страницу, мы должны прежде всего позабо- 
титься об одной важной детали, а именно о размере файла с изображением. Обычно мы 
пользуемся растровой графикой, а ее размеры достаточно велики, поэтому необходимо ка- 
ким-либо образом уменьшить этот размер, используя, например, алгоритмы архивации 
(сжатия) изображений. Это особенно актуально при публикации графических документов в 
сети Интернет. Как мы видим, при работе с векторной графикой эта проблема не столь ак- 
туальна, как при работе с растровой. Поэтому далее, говоря об “изображениях”, будем 
иметь в виду именно растровую графику, если это не оговорено отдельно. 


Цветовая модель ВСВ 


Модель ВСВ можно назвать базовой для компьютерного дизайна, ведь она использу- 
ется для получения изображений (при сканировании) и для вывода их на монитор. Дан- 
ная модель построена на использовании принципов строения глаза человека и идеально 
подходит для светящихся поверхностей (мониторы, телевизоры, цветные лампы и т.п.). 
В основе этой модели лежат три цвета: Кей — красный, Отееп — зеленый и Вше — си- 
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ний. Вще Ломоносов заметил, что с помощью этих трех основных цветов можно полу- 
чить почти весь видимый спектр. Например, желтый цвет — это смешение красного и 
зеленого (рис. 18.3). Поэтому систему КСВ называют аддитивной (суммирующей) систе- 
мой смешения цветов. 


Зеленый 9 Синий 


Голубой 
Рис. 18.3. Аддитивная цветовая модель КОВ 


Каждый компонент цвета в модели КСВ кодируется один байтом (8 бит), а всего для 
описания цвета каждой точки изображения используется 24 бит или 3 байт. Отсюда ста- 
новится понятным, почему растровая графика занимает в памяти гораздо больше места, 
чем текст. К примеру, если ваша картинка имеет размер 100 х 100 пикселей, то для опи- 
сания цвета каждой точки изображения потребуется 100 х 100 х 3 = 30 000 байт или при- 
мерно 30 килобайт. 

В одном байте информации, который используется в молели КСВ для кодирования одной 
составляющей цвета, можно записать числа от 0 до 255. Это число определяет яркость данной 
составляющей: 0 — яркость нулевая (нет света), 255 — яркость максимальная и так для каж- 
дой из трех составляющих модели ВСВ. Код цвета, таким образом, составляется из кодов яр- 
кости трех составляющих, разделенных точками: <К-канал>.<О-канал>.<В-канал>. Напри- 
мер, 255.255.255 — белый цвет, яркость всех составляющих максимальна, 0.0.0 — черный 
цвет, света нет совсем. Для указания КСВ-цвета в НТМ! -коде используется шестнадцатерич- 
ная запись, в которой каждое число кодируется двумя цифрами шестнадцатеричной системы 
счисления. Цифрами здесь являются обычные арабские цифры от 0 до 9 и буквы латинского 
алфавита от А до Е (для представления цифр от 10 до 15). Так, пифровому коду 000 соответст- 
вует шестнадцатеричное слово 00, а 255 — ЕЕ. Начинается код цвета со спецсимвола 
“решетки”, чтобы указать на тот факт, что это именно шестнадцатеричный код, — например, 
#ЕЕЕҒҒЕ для белого или #000000 для черного. 

Практически все НТМІ -редакторы снабжены редактором палитр, из которых можно 
либо выбрать, либо синтезировать необходимый цвет, указав его значение в кодировке 
КСВ. Современные графические редакторы, как правило, уже имеют поле, в котором на- 
ходится шестналцатеричный эквивалент записи ВСВ, и достаточно его оттуда просто 
скопировать. 

Кроме того, сушествует палитра так называемых безопасных цветов — которые ото- 
бражаются одинаково всеми браузерами и рекомендованы для использования в \е- 
дизайне. 
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Безопасные цвета Интернет 


Мы уже не раз говорили о том, что разные браузеры могут по-разному отображать, 
один и тот же НТМІ -код. С передачей цвета дела обстоят аналогично: на разных типах 
компьютеров, мониторов и браузеров цвета с одинаковым кодом могут отличаться. Когда 
браузер не в состоянии правильно перелать тот или иной ивет, он подбирает наиболее 
близкий к нему. Иногла первоначальный цвет может быть заменен чем-то совершенно 
неподходящим. 

Однако существует так называемая палитра безопасных цветов, которые правильно 
и без искажений булут отображаться везде. Таких цветов всего 216, и их можно использо- 
вать для графики, текста и заливки фона вашей страницы. 

Безопасная палитра состоит из цветов, полученных сочетанием шести оттенков крас- 
ного, зеленого и синего с градациями яркостей: 0, 51, 102, 153, 204, 255. Например, цвета 
сзаписью 0.102.204, 51.255.102 или 255.153.0 будут безопасными. 

Работая с графикой в редакторе АдоБе РногозНор, вы можете установить специальный 
флажок Оту М/еЬ Союгз на палитре цветов, т.е. включить режим использования только 
МеЫ-цветов, и тогда ваш дизайн будет универсален. Это окно показано на рис. 18.4. 
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Рис. 18.4. Окно Соіог Ріскеғ (Выбор цвета) программы А4оБе Рћогоѕћор 


Особенности графики для Меь 


Процесс подготовки документов для МеБ существенно отличается от подготовки изо- 
бражений для типографской печати. В отличие от бумажной страницы, размер МеЬ- 
‘страницы не ограничен ни по горизонтали, ни по вертикали. Тем не менее ни в коем случае 
не делайте страниц, ширина которых превышает ширину экрана! Длина страницы менее 
критична, но оптимальная величина — 2—3 экрана. Поскольку изображения на \МеБ- 
странице предназначены только для просмотра на экране монитора, их разрешение должно 
совпадать с разрешением экрана, а размеры не должны превышать размеров экрана. Раз- 
решение монитора варьируется в широких пределах, так же как и диагональ экрана, но на 
практике страницы проектируются исходя из средних величин. Наиболее типичное разре- 
шение мониторов на сегодня составляет 72 пикселя на дюйм (800х600), а диагональ равна 
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15 дюймам (видимая область — 14 дюймов, т.е. около 35 см). Из этих размеров следует вы- 
честь также площадь, занимаемую элементами интерфейса самого браузера. Кроме того, 
‘большинство пользователей предпочитают не открывать окно браузера на весь экран, что- 
бы иметь возможность быстро переключаться между различными окнами. В результате оп- 
тимальный размер изображения получится примерно 600х400 пикселей. 

Поскольку все размеры на \еБ-странице вычисляются исходя из размера экрана, для 
изображений удобнее применять другую единицу измерения — пиксель. Такая единица 
избавляет от необходимости использования пары параметров “размер/разрешение” и по- 
зволяет легко соотнести размер изображения с размером страницы. 

Скорость загрузки УеЬ-страницы лимитируется не быстродействием вашего компью- 
тера, а возможностями канала связи с Интернет. Большинство пользователей используют 
для доступа в Интернет обычные коммутируемые телефонные соединения и модемы, не 
позволяющие принимать данные со скоростью, превышающей 5,3 Кбайт/с. Но даже эта 
скорость достижима далеко не всегда. Качество телефонных линий является одним из 
основных факторов после качества самого модема, ограничивающего скорость связи. Эта 
проблема особенно актуальна для нашей страны, где телефонные линии имеют отврати- 
тельную изоляцию, а сами телефонные станции не модернизировались десятки лет. В по- 
следнее время ситуация начала меняться, большинство новых телефонных станций сей- 
час цифровые, но это не меняет значительно ситуации. Подводя итог, можно сказать, что 
расчет времени загрузки страницы должен базироваться на среднем значении — 
2,88 Кбайт/с. Останавливаюсь на этом подробно, чтобы показать важность создания эф- 
фективных страниц, быстро загружающихся в браузер. 

С точки зрения дизайнера, \МеБ-страница состоит из графического и текстового мате- 
риала. Скорость загрузки текста из расчета на ту же площадь страницы на много поряд- 
ков выше, чем графики. Поэтому при суммарном расчете можно ею пренебречь. Итак, 
‘будем считать, что скорость загрузки страницы — это объем размещенной на ней графи- 
ки, деленный на скорость соединения. 

К высокой эффективности страниц ведет уменьшение количества графики и сокра- 
щение размеров графических файлов. Количество изображений на странице определяет- 
ся ее дизайном. Если у вас есть возможность изменить дизайн страницы таким образом, 
чтобы уменьшить количество изображений и (или) их размеры; то обязательно восполь- 
зуйтесьею. Например: 


• примените сплошной цветной фон вместо графического; 
• используйте цветной фон ячеек таблиц вместо графического; 
• создайте текстовые ссылки вместо графических кнопок; 


• введите для серии страниц повторяющиеся графические элементы, чтобы избе- 
жать их постоянной загрузки по сети; 


• выявите долго загружающиеся изображения и рассмотрите возможность умень- 
шения их размеров. 


г Е Е = = — 
| Безусловно, сокращение количества изображений не должно обеднять дизайн стра- 
| ницы, делать его невыразительным. | 


Сокращение размеров графических файлов достигается их тщательной оптимизаци- 
ей. Последние версии РногозПор (начиная с 6-й) предоставляют для этого все необходи- 
мые средства. Оптимизацией изображений будем называть сокращение размеров файлов 
‘без уменьшения самих изображений. Выигрыш в размере достигается благоларя следую- 
щим факторам: 
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~ использование форматов файлов со сжатием: СІЕ, ЈРЕС, РМС; 

~ уменьшение количества цветов в изображениях; 

• удаление избыточной графической информации в изображениях; 

е предварительная обработка изображений, повышающая эффективность алгорит- 
мов сжатия; 

~ разлельное хранение фрагментов изображений с различными параметрами сжатия, 


Все перечисленные методы позволяют сохранить геометрический размер изображе- 
ний и не меняют дизайна страницы. 


Формат ЈРЕС 


В формате ЈРЕС (Јоіті Рһоќоргарћһіс Ехрегіѕ Сгоир) был впервые реализован новый 
принцип сжатия изображения с потерей информации. Суть работы этого алгоритма за- 
ключается в том, чтобы “выбросить” лишнюю информацию из изображения, избавиться 
от деталей, которые не способен различить человеческий глаз. Алгоритм разбивает изо- 
бражение на квадраты размером 8х8 пикселей и как бы усредняет значения цвета на этом 
квадрате. Тем самым изображение упрощается и лучше сжимается. 

Наиболее широко этот формат используется при создании изображений для элек- 
тронного распространения на компакт-дисках или через Интернет. Используйте формат 
ЈРЕС только для фотографических изображений с плавными персходами цветов. На ри- 
сунках с четкими границами и большими заливочными областями сильно проявляются 
дефекты сжатия, заметные в виде цветового шума на однотонных областях. 

Кроме того, при сильном увеличении изображения в формате ЈРЕС можно увилеть 
его “мозаичную структуру”. Становятся видны эти усредненные фрагменты, поэтому та- 
ким изображениям противопоказано большое увеличение. 


| тия, а следовательно, и качество получаемого изображения. | 


Формат ©ІЕ 


Формат СПЕ (Старз Іліегсһапре Рогта!) создан крупнейшей сетевой службой 
Соприбегуе (ныне подразделение АОІ., Атегіса Опііпе) специально для передачи растро- 
вых изображений в глобальных сетях. Формат реализует алгоритм 1\/7, (аналог простого 
архиватора), не приводящий к потере качества. 

Изображение в формате СЛЕ имеет палитру, которая может содержать ло 256 цветов, 
и в качестве значения цвета отдельного пикселя хранится индекс (номер) цвета в палит- 
ре. Кроме того, один из цветов в палитре индексированного изображения можно объя- 
вить “прозрачным”. В браузере сквозь участки этого цвета будет виден фон страницы. 

Использование палитры сразу же накладывает ограничение на применение этого 
формата для фотореалистичных изображений. Больше всего формат СІРЕ подходит для 
изображений, где есть большие области. залитые одним цветом, и нет плавных иветовых 
переходов. Для изображений с плавными переходами формат СІР не дает ощутимого 
выигрыша в объеме файла. Кроме того, качество изображения сильно ухудшается, по- 
скольку в палитру из изображения будет выбрано только 256 цветов. 

Еще одной особенностью формата СПЕ является последовательность архивирования: 
алгоритм работает построчно, слева направо. Если рассмотреть изображение с горизон- 
тальными чередующимися полосами, то после сжатия оно будет занимать меньше места, 
чем такое же изображение, но повернутое на 90°. Примеры таких изображений размером 
70х70 пикселей приведены на рис. 18.5 и 18.6. 
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Рис. 18.5. Размер этого Рис. 18.6. Размер этого 
‘изображения в формате ‘изображения в формате 
СІР — 171 байт СІР — 354 байт 


Дело в том, что запись идет построчно, и в этом случае проще написать: 70 черных 
пикселей (такая запись повторяется 6 раз, так как 6 пикселей — толщина линии), 70 бе- 
лых пикселей, повторяется 6 раз и т.д. Тогда как для описания второго изображения по- 
требуется такая запись: 6 черных пикселей, 6 белых пикселей, 6 черных, 6 белых и так да- 
‘лее, по числу полос. Потом эту запись придется повторить 70 раз по общему числу строк 
в изображении. Второе изображение с точки зрения алгоритма сжатия СПЕ описать 
сложнее, поэтому оно и занимает больше места. 

Версия СТЕ 89а позволяет сохранять в одном файле несколько индексированных изо- 
бражений. Браузеры способны демонстрировать все эти изображения по очереди, полу- 
чая в результате несложную анимацию. В файле анимации хранятся не только кадры, но 
и параметры демонстрации: задержки между сменой изображения и количество повторе- 
ния анимации (от одного раза до бесконечности). 

СІЕ-анимация в силу своей простоты была наиболее распространена в Интернет до 
последнего времени, однако теперь РИаз|-анимация (создается в пакете Ғ1аѕћ, предназна- 
ченном для работы с векторной графикой) составляет ей достойную конкуренцию. 


Формат РМС 


Формат РМС (РопаЫе Мегмогк Сгарћһісѕ, Компактная сетевая графика), как следует 
из его названия, разрабатывался для передачи изображений по сети. Это достаточно мо- 
лодой формат для МеБ-графики, конкурирующий с СІҒ и ЈРЕС. Все последние версии 
браузеров поддерживают его без подключения дополнительных специальных модулей. 

Формат РМС использует алгоритм сжатия без потерь и поддерживает полутоновые 
(черно-белые) и полноцветные изображения в модели КСВ с одним альфа-каналом, 
а также индексированные и монохромные изображения без альфа-каналов. Альфа-канал — 
это маска, описывающая, какая область изображения может быть прозрачной. Таким обра- 
зом, РМС — единственный из распространенных в Интернет форматов, позволяюший по- 
лучать полноцветные фотореалистичные изображения с прозрачным фоном. Анимация 
в формате РМС не поддерживается. 

Надо отметить, что размер файлов, получаемых в результате работы алгоритма сжа- 
тия, в несколько раз превышает размеры файлов, получаемых с использованием СЕ или 
ЈРЕС. РМС пока не выдерживает конкуренции в отношении размера файлов, хотя каче- 
ство получаемых изображений сравнимо с СІҒ и ЈРЕС. Поэтому пользуйтесь форматом 
РМС только в том случае, когда позарез нужно получить фотореалистичное изображение 
с прозрачным фоном. В остальных случаях в зависимости от типа изображения исполь- 
зуйте форматы СІЕ или ЈРЕС. 


Использование ІтадеВеаду для оптимизации 
изображений 


Основная часть специализированных функций для МеБ-дизайна реализована в виде 
отдельного компонента известного графического редактора Рћоѓоѕћор фирмы АдоБе — 
программы ПпазсКеаду. Изначально эта программа представляла собой сильно упро- 
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щенную (и, соответственно, более дешевую) версию Рһоѓќоѕћор с несколько измененным 
интерфейсом. Судя по всему, она не завоевала симпатий пользователей, и первая версия 
программы оказалась ее последней самостоятельной версией. Дизайнерам скорее всего 
не хватало тех инструментов, которыми они привыкли пользоваться в Рћохоѕћор. Отве- 
том на провал ІтареЌеаду было включение второй версии программы внутрь Рћоѓоѕћор, 
‘начиная с версии 5.5. Такой тандем сейчас действительно позволяет решить практически 
любые задачи по подготовке графики для любых целей, будь то полиграфическая печать 
или публикация в Интернет. Тем не менее некоторые возможности доступны только 
в компоненте І тавеКеаду. Вот эти возможности: 


® разрезание готового макета и оптимизация отдельного фрагмента; 
® создание анимированных СІР-изображений; 

® создание интерактивных элементов (гоЦоуег-элементов); 

® создание карт ссылок на основе изображений. 


Чтобы облегчить пользователям работу в двух программах одновременно, разработчики 
включили в каждую из них особую команду перехода к другому приложению. Для переклю- 
чения между приложениями в меню Рйе (Файл) каждого из них имеется подменю Јитр 10 
(Перейти к). Оно содержит команлы с названиями программ, которые можно запустить. 
Программа установки помещает в него все продукты фирмы Адобе. Вы можете самостоя- 
тельно дополнить это подменю подходящими программами, добавив их ярлык в папку 
не1регз, вложенную в основную папку Рһоќоѕћор. Таким образом, один и тот же файл 
можно редактировать в нескольких программах одновременно, переходя из одной в другую. 

Главное окно программы |тазеКеаду в первый момент легко перепутать с Рһоѓоѕћор, 
настолько похожи они внешне (рис. 18.7). Более внимательный взгляд отметит множест- 
во особенностей. В первую очередь, это несколько специальных инструментов на панели 
инструментов и дополнительные палитры. Мы немного отвлеклись на обсуждение общих 
вопросов, и теперь вернемся к проблемам оптимизации. 

Оптимизация изображений неразрывно связана с форматом файлов, в котором их 
предполагается сохранить. Чтобы обеспечить максимальную плотность сжатия, для каж- 
дого алгоритма предпочтительны изображения, предварительно обработанные особым 
способом. Так, например, сокращение количества цветов изображения не приведет к за- 
метному выигрышу в размере ЈРЕС-файла, а сглаживание цветовых переходов только 
ухудшит дело лля алгоритма СІЕ. Поэтому, начиная оптимизацию изображений, сначала 
выберите какой-либо конкретный формат графических файлов, в котором планируете 
это изображение сохранить. 

Оптимизация неминуемо ухудшает качество изображения. Так, высокая степень 
ЈРЕС-сжатия вызывает появление хорошо известных всем МеЬ-дизайнерам артефактов 
и искажений цветопередачи. Сокращение количества цветов для последующего сохране- 
ния в формате СЛЕ или РМО вызывает неприглялный эффект, называемый постеризаци- 
ей изображения (превращения его в “плакат”). В этом случае недостающие цвета заме- 
няются другими максимально близкими по цвету из палитры изображений. Таким обра- 
зом, оптимизация всегда сводится к достижению компромисса между размером файла 
и приемлемостью качества изображения. 

Что же является критерием качества? На сегодняшний день единственным инструмен- 
том оценки может служить человеческий глаз. Качество полученного изображения считает- 
ся хорошим, если на взгляд невозможно определить, где оригинал, а где результат оптими- 
зации. Отличным — если отличия можно найти, только расположив оригинал и результат 
рядом. Поэтому особую важность приобретают улобные и наглядные средства оценки ре- 
зультатов оптимизации. Программа ІтағеКеаду располагаст ими в полной мере. 
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Рис. 18.7. Главное окно программы ІтавеКеайу 


Все варианты оптимизации так или иначе поддерживаются любыми графическими 
редакторами. Преимущество таре саду заключается в удобстве работы и управления 
параметрами оптимизации, а также возможности немедленной оценки полученного ре- 
зультата. Окно каждого документа ІтареКеаду способно отображать его как в исходном, 
так и в оптимизированном виде, что позволяет до сохранения документа оценить его ка- 
чество. Раньше приходилось сохранять изображения с определенными параметрами, 
апотом снова открывать и сравнивать полученное качество, что было очень неудобно 
и отнимало много времени. Теперь качество результата можно оценить еще до того, как 
оптимизированное изображение будет сохранено. 

Для просмотра результатов окно документа имест 4 вклалки. 


• Опдпа! (Оригинал). Изображение в исходном виде. 


• Орітігеа (Оптимизированное). Вид изображения после оптимизации. Именно 
так оно будет выглядеть в браузере. 

• 2-0р (Два). Одновременный просмотр оригинала и оптимизированного изобра- 
жения. 


• 4-0р (Четыре). В этом режиме область просмотра делится на 4 окна, в которых 
можно назначить демонстрацию оригинала и оптимизированного изображения 
с разными параметрами оптимизации, чтобы сравнить их и выбрать оптимальный. 
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Рис. 18.8. Окно документа в программе ІтазеКеайу 


Таким образом, вы открываете в птареКеаду изображение, которое нужно оптимизиро- 
вать, выбираете подходящий режим просмотра (лучше всего2-0р или 4-0р) и настраиваете 
параметры оптимизации. Если размер файла (для справки — размер и примерная скорость 
загрузки оптимизированного изображения всегда отображаются внизу окна) и качество 
изображения (его вы оцениваете визуально, сравнивая оригинал и оптимизированное изо- 
бражение) вас устраивают, сохраняете его с помощью команды Ѕаме Оріітігей Аз 
(Сохранить оптимизированное как). Дальше остается только насладиться полученным ре- 
зультатом и порадовать посетителей вашего сайта хорошо оптимизированной графикой. 

Параметры оптимизации для всех трех форматов файлов можно настроить в палитре 
Орітіге (Оптимизация). Сначала вы выбираете формат файла, после чего окно меняет 
свой вид и становятся доступны параметры оптимизации под конкретный графический 
формат (рис. 18.9-18.10). 


Рис. 18.9. Палитра Орйтиге 
для формата ЈРЕС 


Рис. 18.10. Палитра Орітіге 
для формата СЕ 


Ниже приводятся параметры сохранения (команла Зауе Аз (Сохранить как)) трех ви- 


дов файлов в Рһоїоѕћор 7.0. В палитре Орітіге (Оптимизация) в ІтавеКеаду представле- 
ны не все параметры, но лучше познакомиться со всеми. 
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В новых версиях Рћоѓоѕћор и ітареКеайу С$ эти палитры имеют немного другой вид, 
но назначение их осталось прежним. 
Параметры сохранения ЈРЕС 


При сохранении файла в формате ЈРЕС Рћоіоѕћор выводит окно параметров сохранения, 
показанное на рис. 18.11. Рассмотрим назначение параметров, содержащихся в этом окне. 


т5к/гла © [566и5 = 


Рис. 18.11. Окно параметров сохранения файла 
в формате ЈРЕС 


Палитра Майе (Кайма) доступна только при сохранении копии изображения (команда 
Заме аз сору) и прелназначена для залания цвета фона для изображения, исходно разме- 
щенного на прозрачном фоне. 

Параметр Оџаійу (Качество) предназначен лля задания степени сжатия исходного 
изображения, а значит, и его результирующего качества. Доступны количественные зна- 
чения от 1 до 12 или качественные ом, Медіит, НОР. Чем выше качество, тем, соответ- 
ственно, больше размер результирующего файла. Как показывает практика, среднее ка- 
чество (от 5 до 7) гарантирует оптимальное соотношение между качеством итогового изо- 
бражения и размером файла. Можете поэкспериментировать и убедиться, что, сохранив 
две копии изображения в формате ЈРЕС с максимальным качеством и со средним значе- 
нием 5-7, вы вряд ли визуально найдете большие отличия в изображении, а вот выигрыш 
в Вее файла булет достаточно существенным. 

Предупреждение! Ите в виду, что при повторном сохранении обата 

| в формате ЈРЕС происходят дополнительные потери качества. Поэтому ставьте 
эксперименты над копиями одного и того же изображения и старайтесь не сохра- | 
нять его повторно. 


В группе Ропта! Оріопѕ (Параметры) присутствует переключатель, позволяющий 
выбрать вариант используемого алгоритма сжатия. 


~ Ваѕеііпе (Ѕїапдай) — будет использован универсальный алгоритм, и полученный 
файл будет совместим со всеми программами. 


• Ваѕеііпе Орітігеа — этот вариант алгоритма дает немного меньший размер фай- 
ла, чем предыдущий. 
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• Ргодгеѕѕіуе — используется лля изображений, размещаемых на \\еб-страницах. 
Его особенность в том, что он позволяет схематично прорисовать изображение 
в браузере сразу же после начала его загрузки, а затем постепенно улучшать прори- 
совку по мере поступления новых порций информации. Параметр Ѕсапѕ залает 
число шагов прорисовки: 3, 4 или 5. При этом варианте размер файла будет чуть 
больше, но, с другой стороны, пользователь может оценить общее содержание 
изображения еще до того, как оно будет полностью загружено с сервера. 


В группе Зе программа выводит приблизительный размер будущего файла, время 
его загрузки при выбранной в раскрывающемся списке скорости передачи информации 
по сетевому соединению. 

Те же параметры будут и в палитре Орітіге (Оптимизация) в ІтареКеаду (рис. 18.12). 
Здесь имеется еще один параметр Вішг (Размытие), который позволяет автоматически сгла- 
дить дефекты от работы алгоритма сжатия, например, на границах двух контрастных цве- 
тов, особенно если граница была четкой. В качестве значения этого параметра указывается 
радиус размытия изображения в пикселях (от 0 до 2 пикселей). Учтите, что слишком боль- 
шой радиус размытия может привести к потере резкости в изображении. Во многих случаях 
размытие вообще не требуется. 


Рис. 18.12. Окно параметров 
оптимизации файла в фор- 
мате ЈРЕС в [тавеКеайу 


Параметры сохранения СЕ 


При сохранении файла в формате СЕ Рһоќоѕћор выводит окно параметров сохранения, 
показанное на рис. 18.13. Рассмотрим назначение параметров, содержащихся в этом окне. 
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Рис. 18.13. Окно параметров сохране- 
ния файла в формате СЛЕ 
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Как вы помните, формат СЛЕ сохраняет изображения в индексированных цветах, т.е. обя- 
зательно содержит палитру цветов, один из которых может быть прозрачным. Если нужно со- 
хранить прозрачность — установите флажок Тгапзрагепсу (Прозрачность). Если прозрачного. 
цвета в вашем изображении быть не должно — сбросьте этот флажок, чтобы прозрачный цвет 
не занимал место в палитре цветов, — оно вам пригодится для других цветов, присутствующих 
в изображении. 

В группе Райее (Палитра) одноименный список позволяет выбрать один из трех спо- 
собов выбора цветов из изображения в палитру. 


• Регсерша! (Перцепционный). В этом случае в палитру помещаются те цвета, к ко- 
торым человеческий глаз наиболее восприимчив. Научно доказан факт, что есть 
диапазоны цветов, которые глаз различает лучше, чем другие. Это относится, на- 
пример, к зеленым оттенкам. 

• Зеіесіме (Селективный). Способ сходен с прелылушим, но предпочтение отдается 
превалирующим цветам изображения, т.е. тем, которые чаще всего в нем встречаются. 


• Адарйуе (Адаптивный). В палитру помещаются только те цвета, которые превали- 
руют в исходном изображении. 


Помимо этих вариантов, в списке РогсеЯ (Принулительно) можно выбрать одну из 
фиксированных палитр — например, палитру \еБ-иветов (безопасных цветов Интернет) 
или одну из системных палитр (т.е. палитр, солержащих фиксированные цвета, исполь- 
зуемые в интерфейсе определенных операционных систем). Палитру операционной сис- 
темы имеет смысл выбрать в том случае, когда изображение представляет собой часть ин- 
терфейса какой-либо программы. Палитру безопасных цветов Интернет стоит выбирать, 
когда существует строгая необходимость, чтобы изображение выглядело одинаково во 
всех браузерах и на любых платформах. Однако всегда следует помнить, что это может 
привести к значительному искажению исходного изображения. 

В группе Оріопѕ (Режимы) содержатся следующие параметры. Палитра Мане 
(Кайма), как и в случае формата ЈРЕС, позволяет выбрать цвет фона, если исходно фон 
изображения был прозрачным. В раскрывающемся списке Ойћег (Параметры сглажива- 
ния) указывается. как будут замещаться цвета изображения. не попавшие в палитру. Дос- 
тупны следующие значения. 


• РаНет (Узор) — отсутствующие в палитре цвета заменяются “узором” пикселей, 
имеющихся в палитре индексированного изображения. Этот метод не очень эф- 
фективен, так как в изображении при этом проявляется регулярная структура, по- 
добная муару. 

• ОНизоп (Диффузия) — дает лучший внешний вид. Цвет отдельного пикселя вы- 
бирается из палитры так, чтобы вместе с соседними в результате оптического об- 
мана он составлял цвет, максимально приближенный к оригиналу. 

• Моіѕе (Шум) — усовершенствованный вариант предылущего, создает менее регу- 
лярное сглаживание, узор пикселей менее заметен. 


Степень сглаживания задается в поле Атоип! (Количество) — чем сильнее сглажива- 
ние, тем больший диапазон цветов может передать индексированное изображение. Оп- 
тимальным считается значение 75% — именно это значение устанавливается в настрой- 
ках программы по умолчанию. 

Флажок Ргезегуе Ехас! Союгз (Сохранять точные цвета) включает режим, при кото- 
ром алгоритм сглаживания будет сохранять пиксели тех цветов, которые имеются в па- 
литре, не включая их в регулярные узоры. Обязательно установите его, если в исходном 
изображении было больше 256 цветов, чтобы сохранить неискаженными цвета, попав- 
шие в палитру. 
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Параметры сохранения РМС 


При сохранении файла в формате РМС Рһоїоѕћор выводит окно параметров сохране- 
ния, показанное на рис. 18.14. Как видите, параметров сохранения в этом формате прак- 
тически нет, окно содержит только переключатель, позволяющий выбрать используемый 
тип развертки. 


Рис. 18.14. Окно параметров со- 
хранения файла в формате РМС 


Смысл этого параметра в следующем. Изображение, как правило, загружается в брау- 
зер не сразу, на это требуется некоторое время. Тип развертки определяет способ записи 
‘изображения в файл, позволяя сразу же увидеть на странице приблизительное содержа- 
ние загружаемого изображения. По мере поступления на компьютер пользователя новой 
информации об изображении, оно будет детализироваться. 


• Могта! (Обычный) — по мере загрузки будет просто появляться следующий кусок 
изображения, в направлении сверху вниз. 


• Іпіейасеа (Чересстрочный) — браузер загрузит сначала нечетные, а только потом чет- 
ные строки изображения, в результате можно будет быстрее увилеть приблизительное 
содержание изображения и решить, стоит ли дожидаться полной его загрузки. 


Как уже говорилось, файлы в формате РМС получаются недопустимо большого раз- 
мера для публикации в Интернет, поэтому для фотореалистичных изображений и изо- 
бражений с плавными переходами цветов лучше пользоваться форматом ЈРЕС, а для 
изображений с небольшим количеством цветов — форматом СИЕ. 
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Глава 19 
Размещение работы в Интернет 


В этой главе ... 


> Регистрация домена 
> Хостинг 

> Рекламная кампания 
> Вместо заключения 


После того как \МеБ-страница или сайт созданы, очевидно, что результаты ваших тру- 
дов нужно опубликовать в Интернет, чтобы любой желающий мог их увидеть. Для этого. 
‘необходимо выполнить несколько действий: 


• зарегистрировать домен; 
• выбрать хостинг; 
• запустить рекламную кампанию по раскрутке своего проекта в сети. 


Для каждого из перечисленных выше пунктов доступны, как минимум, два альтерна- 
тивных варианта действий. Можно воспользоваться платными услугами, если вы готовы 
понести определенные траты, или же предпочесть альтернативные бесплатные аналоги. 

Пожалуй, лучше поговорить обо всем по порядку. 


Регистрация домена 


В доменах верхнего уровня любой человек или организация могут зарегистрировать 
поддомен, который будет называться доменом второго уровня. Домены первого уровня 
давно распределены: каждая страна имеет свой домен (КО, ЦА, ОЕ ит.п.), есть домены, 
указывающие на род деятельности организации (СОМ, МЕТ, ТУ, Еру ит.п.) 

Регистрация доменов второго уровня производится на платной основе. Упрощенно 
схема регистрации выглядит так: вы выбираете доменное имя второго уровня и домен 
верхнего уровня, в котором хотите его зарегистрировать. Доменное имя может состоять 
‘из букв латинского алфавита, цифр и символа тире “—”. Если это доменное имя еше ни- 
кому не принадлежит, вы сможете его зарегистрировать для себя. 

Регистрацией доменов второго уровня занимаются аккредитованные ІСАММ органи- 
зации, список которых можно посмотреть на сайте 1САММ (БЕЕр:/ /млим.Зсапп. 
огд/гедіѕсгагѕ/ассгедісей-1156 .Һет1). В России одной из компаний, предостав- 
ляющих услуги по регистрации доменных имен второго уровня в перечисленных выше 
зонах, является КО-СЕМТЕК (һер: //1пЕо.п1с.ки/). 

Регистрация домена происходит в несколько этапов. Вначале следует определиться: 
готовы ли вы платить за доменное имя около $20-25 в год или предпочтительнее это сде- 
лать бесплатно? Регистрация доменов второго уровня (в зонах КО, СОМ, МЕТ, ОКС или 
их кириллических аналогах) производится исключительно на платной основе. Однако 
есть специальные домены второго уровня, в которых вы можете зарегистрировать свой 
поддомен третьего уровня бесплатно. Это следующие домены: 


® рр.ги — для персональных страниц; 
ә пе. га — для ресурсов, способствующих развитию Интернет и сетевых технологий; 
• соп.ка — для коммерческих организаций и т.п. 


Кроме этого, существует множество доменов второго уровня, регистрация поддоме- 
нов третьего уровня в которых также бесплатная. Как правило, это проекты бесплатного. 
хостинга, например МАВОР . ВО, НІ. КО, ВУ . ВИ и многие подобные им. 

Лучше определиться заранее, какое доменное имя и в какой зоне вы хотите зарегист- 
рировать. После этого необходимо проверить, свободно ли оно. Сделать это можно, за- 
полнив соответствуюшую форму на сайте регистратора или, например, на сайте 
БЕЕр://хед-Чота#п.пее.ки. Если имя уже кому-то принадлежит, то зарегистриро- 
вать такой домен для себя вы не сможете. Придется придумать другое название, которое 
соответствует вашим целям и еше никем не занято. Если нужное доменное имя оказалось 
своболным, то следует заполнить необходимые поля в регистрационной форме и опла- 
тить регистрацию. Регистрировать домен можно на срок от 1 года до 10 лет. Оплата про- 
изводится электронным платежом, например через систему \еЬ Мопеу, с помощью меж- 
дународной кредитной карточки или обычным перечислением денег через Сбербанк. 

После того как вы произвели оплату и оформили все необходимые документы, до- 
менное имя передается вам на 1 год. Спустя год вы можете продлить регистрацию, внеся 
очередную абонентской плату за следующий год, а можете этого не делать, если доменное 
имя вам больше не требуется. Тогда ломен снова станет свободным, и кто-то другой смо- 
жет его зарегистрировать на себя. 


Хостинг 


Пока вы создаете свой МеБ-сайт, то, естественно, храните его на жестком диске сво- 
его личного компьютера. Однако чтобы сделать сайт доступным для всех желающих, не- 
обходимо разместить его на Међ-сервере, задача которого в том и состоит, чтобы предос- 
тавлять доступ к хранящимся на нем документам любому пользователю, пославшему со- 
ответствующий запрос. 

В самом широком смысле слова хостинг — это аренда места на жестком диске Међ- 
сервера, который будет предоставлять доступ к вашему сайту круглосуточно. Вы можете 
арендовать столько места, сколько нужно для размещения вашего сайта. 

Конечно, можно установить соответствующее серверное программное обеспечение 
и на собственном домашнем компьютере, но тогда ваш сайт будет доступен всему миру 
только в те промежутки времени, когда ваш компьютер будет соединен с Интернет. 
Круглосуточное соединение, во-первых, слишком дорого обходится, а во-вторых, ско- 
рость соединения домашних компьютеров с Интернет, как правило, значительно ниже, 
чем у компаний, специально занимающихся предоставлением услуг хостинга. 

Хостинг-провайдеры чаще всего имеют очень мощные Међ-серверы, широкий канал 
доступа и, кроме непосредственно услуг хостинга, предлагают целый спектр дополни- 
тельных услуг. К ним относятся регистрация домена, поддержка ОМ$, наличие поддерж- 
ки баз данных, языков программирования, почтовые ящики в вашем домене ит.п. 

Как правило, услуги продаются пакетами. В каждый пакет входит комплекс услуг 
и определенный объем на жестком диске, который вы можете занять под свой сайт. В за- 
висимости от комплектации пакета услуг и объема арендуемого места меняется и цена. 
Чаще всего цена указывается за один месяц пользования услугами хостинга. При покупке 
хостинга на длительный срок (год и более) цена снижается, поскольку предоставляются 
определенные скидки. 
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Однако у вас всегда есть альтернатива платному хостингу — это все те же серверы 
бесплатного хостинга МАКОр. ВО, НІ . ВИ, ВУ. ЕЦ и многие подобные им. 

Когда вы зарегистрировались у хостинг-провайдера и оплатили услуги хостинга, по- 
лучаете доступ на ЕТР-сервер в вашу персональную папку. В эту папку вам и нужно зака- 
чать свой сайт. Внутри этой папки вы можете создавать собственные папки. Если вы соз- 
давали сайт и использовали при этом относительную адресацию для ссылок и добавления 
изображений в документы, то после переноса на М№еБ-сервер ваш сайт должен полностью 
сохранить свою работоспособность. Теперь он будет готов к просмотру с любого компь- 
ютера, подключенного к Интернет. Пользователю достаточно будет лишь набрать адрес 
вашего сайта в адресной строке — и готово, соединение с вашим сайтом будет установле- 
но. Однако как мир узнает, что в Интернет появился новый сайт с тем или иным адре- 
сом? Это, опять же, ваша задача — сделать так, чтобы о новом сайте узнало, а затем и по- 
сетило его как можно больше людей. Требуется проведение специальной рекламной 
кампании или, как говорят в Сети, раскрутка сайта. 


Рекламная кампания 


Ваша рекламная кампания будет зависеть от того, какой целевой аудитории посвящен 
сайт. Если это персональная страница для друзей, то лостаточно отправить им по почте 
адрес вашей новой домашней страницы, и на этом кампанию можно сворачивать. 

В более сложной ситуации вы вряд ли будете знать адрес каждого, кому может быть 
интересен ваш сайт. Здесь вы можете предпринять несколько вариантов для повышения 
посещаемости сайта. 

Вы можете организовать рекламную кампанию в какой-либо баннерной сети. Выби- 
раете наиболее близкую по тематике вашего сайта и регистрируетесь в ней. Смысл рабо- 
ты баннерных сетей прост. Каждый пользователь сети размещает на странице своего сай- 
та баннер данной сети. Пользователь, заходя на вашу страницу, видит баннеры других 
пользователей этой сети. На страницах других сайтов крутятся ваши баннеры. Каждый, 
кто увидит баннер, рекламирующий некий сайт, может щелкнуть на нем и незамедли- 
тельно попадет на него. Таким образом происходит “обмен” посетителями сайтов, заре- 
гистрированных в одной баннерной сети. 

Степень успешности такого полхода зависит от привлекательности вашего баннера 
иот количества показов вашего баннера в сутки на других сайтах. Чем чаще его видят 
ичем привлекательнее он кажется посстителю, тем больше вероятность, что на нем 
щелкнут и попадут к вам в гости. А дальше, если пользователю понравится ваш сайт и он 
найдет там полезную для себя информацию, то. скорее всего, он станет вашим постоян- 
ным посетителем. В этом случае ваша задача — подогревать его интерес к вашему ресур- 
су, развивая его и постоянно обновляя. 

В какой-то степени аналогом этой системы является простой обмен кнопками между 
дружескими сайтами. Например, вы договариваетесь со своим приятелем, у которого то- 
же есть сайт, обменяться кнопками (обычно ее размер 81х33 пикселя) со ссылкой на ваш 
сайт. Вы оба размещаете их у себя на сайтах, и пользователь одного сайта сможет перейти 
на другой сайт. Принцип работы такой же, как и у баннера, только по взаимной двусто- 
ронней договоренности. Естественно, ничто не мешает вам договориться об этом с де- 
сятком друзей, только прежде подумайте, где же на сайте вы разместите десять кнопок. 

Последнее замечание относится и к регистрации на серверах, позволяющих устано- 
вить счетчики посещаемости. Не злоупотребляйте счетчиками, выберите один сервер, 
максимум два, и поставьте на страницу счетчики только с этих серверов. С их помощью 
вы сможете следить, как во временной динамике меняется посещаемость вашего сайта. 
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Адреса таких серверов: 115. ги, ша11.ки, ВоЕ109 .ка, существуют и многие другие. 
На таких серверах ведется статистика посещаемости, благодаря чему вы сможете следить 
на перемещениями вашего сайта в рейтинге. Высокие позиции могут также положитель- 
но сказаться на росте популярности вашего ресурса. 

Но, пожалуй, самую большую роль в привлечении новых посетителей на ваш сайт бу- 
дут играть поисковые системы. Именно со страниц поисковых систем пользователи чаще 
всего впервые попадают на сайты. 

Ответу на вопрос о том, как оптимизировать сайты под поисковые системы, вполне 
можно посвятить отдельную книгу, и даже не одну. Попробуем вкратце описать принцип 
работы поисковых систем. 

Любая поисковая система представляет собой программно-аппаратный комплекс. 
Основной составляющей поисковой системы является база данных или индекс поиско- 
вой системы. Специальные программы-роботы (пауки) постоянно блуждают по Интер- 
нет, просматривая и анализируя содержимое миллионов НТМГ-документов. Роботы ра- 
ботают непрерывно, собранная ими информация сохраняется в сжатом виде в специаль- 
ной базе данных, а затем индексируется. Индекс поисковых систем периодически 
обновляется, например раз в неделю. Поэтому вновь появившийся сайт появляется в ба- 
зе данных поисковой системы только после обновления информации в ней, а не сразу 
после опубликования сайта. По холу изучения материала уже делалось несколько заме- 
чаний, позволяющих повысить рейтинг вашей страницы в поисковых системах. Главный 
критерий — максимальное соответствие условиям запроса пользователя. В настоящее 
время оптимизация сайтов под поисковые машины стала чуть ли не самостоятельной об- 
ластью науки, и занимаются этим настоящие знатоки своего дела. 


Вместо заключения 


Вместе мы прошли через все этапы создания МеЬ-страниц и вот сейчас дошли до ло- 
гического завершения. Страница спроектирована, создана и опубликована в Интернет. 
Надеюсь, что с помощью знаний, почерпнутых из этой книги, вы в скором времени соз- 
дадите не один замечательный сайт для себя или своих друзей, а в будущем, возможно, 
займетесь и выполнением коммерческих проектов. 

Помните, что учиться лучше на конкретных примерах, поэтому смело беритесь за 
свой первый самостоятельный проект! 

Желаю успехов! 
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Специальные символы 


Таблица А.1. Специальные символы 


Символ Имя Код Описание 
пробел тр 54160; неразрывный пробел 
$ весі 6#167; параграф 
© сору &#169; знак сорупом 
. 1адоо 68171; левая двойная угловая скобка 
» гасио 6#187; правая двойная угловая скобка 
® гед 69174; знак зарегистрированной торговой марки 
= стаде 518482; знак торговой марки 
уу Екас14 дробь — одна четверть 
ый Екас12 дробь — одна вторая 
з т Еғас34 дробь — три четверти 
Һе11ір 618230; многоточие. 
, ргіпе 418242; одинарный штрих — минуты и футы 
. Ргіпе 608243; двойной штрих — секунды и дюймы 
/ Егаѕ1 608260; косая дробная черта 
оо Зап &#8734; бесконечность 
= аѕупр 608776; почти равно — асимптотически стремится 
# пе 518800; не равно 
к еспіу 68801; тождественно 
А 1е 518804; меньше либо равно 
> е 508805 больше либо равно 
ы «ое &#34; ‘двойная кавычка — АРІ диоќе 
& апр &#38; амперсанд, 
< 16 5%60; знак "меньше" 
> 13 6662; знак ‘больше" 
. 1вало 518216; левая одинарная кавычка 
р гало 688217; правая одинарная кавычка 
А зБацо 518218; нижняя одинарная кавычка. 
5 Ласло &18220; левая двойная кавычка 
» гадчо #8221; правая двойная кавычка 
е ъаачо 698222 нижняя двойная кавычка 
{ 1 зато &#8249; левая фигурная скобка 
} гѕадио 698250; правая фигурная скобка. 
= ешго 668364; валюта евро 


Таблица именных цветов 


Таблица А.2. Именные цвета 


ЯСВ-код цвета Шестнадцатеричный код цвета _Цвет Имя цвета 
255.255.255 ЕРЕЕЕЕ млие 
255.255.240 РЕРРРО Могу 
255.255.224 РЕРЕЕО помуеном 
255.255.0 ЕЕЕЕОО Уейом 
255.250.250 РЕРАРА | Б 
255.250.240 ҒЕҒАРО Аогампйе 
255.250.205 РЕРАСЬ тепопси оп 
255.248.220 ҒЕЕВЮС Согпѕіїк 
255.245.238 ЕЕЕЅЕЕ Зеазпей 
255.240.245 РЕРОЕ5 олай іауепдегЫиѕћ 
255.239.213 ЕРЕЕО5 Рарауамћір 
255.235.205 РРЕВСО Вапспедайтопа 
255.228.225 ЕЕЕАЕ1 Е | Міѕїугоѕе 
255.228.196 РРЕ4С4 Віѕаџе 
255.228.181 ҒҒЕ4В5 Моссаѕіп 
255.222.173 ЕРЮЕАР Мауајомћійе 
255.218.185 РЕОАВ9 | Бо 
255.215.0 ЕЕр700 бов 
255.192.203 ҒЕСОСВ Ріпк 
255.182.193 РЕВбС1 ёе: патрик 
255.165.0 РРАБО0 Огапде 
255.160.122 ЕЕАОТА | ПО 
255.140.0 ЕРВСОО Оагкогапде 
255.127.80 ЕР7Е50 Сога! 
255.105.180 РРбЭВ4 Ноѓріпк 
255.99.71 ЕЕ6347 Тотаіо 
255.69.0 ЕР4500 Огапдегеа 
255.20.147 ЕҒ1493 Оеерріпк 
255.0.255 ЕҒООЕЕ Мадема 
255.0.255 ЕЕООЕЕ Ғисһѕіа 
255.0.0 ЕҒО000 Веа 
253.245.230 ЕРЕ5Еб ОКасе 
250.250.210 ҒАҒА2 понюовепгодуеном 
250.240.230 ЕАРОЕб пеп 
250.235.215 ЕАЕВЮ7 Апнацемтие 


ЕА8072 Ѕаітоп 
ЕВЕВЕЕ Сһоѕмћйе 
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Продолжение табл. А.2 


ЯСВ-код цвета Шестнадцатеричный код цвета Цвет Имя цвета 
245.255.250 Е5РЕЕА. Міпісгеат 
245.245.245 ЕЅЕЅЕ5 М/Незтоке 
245.245.220 Е5ЕБОС Веіде 
245.222.179 ЕЅОЕВЗ Мһеаї 
244.164.96 Е4А460 Запдубгоми 
240.255.255 ЕОЕЕЕЕ. Агиге 
240.255.240 РОРЕРО Нопеудем 
240.248.255 ЕОЕВЕР АісеЫџе 
240.230.140 Е0Еб8С Кһакі 
240.128.128 ғ08080 | Бонисога! 
238.232.170 ЕЕЕВАА Раедовепгой 
238.130.238 ЕЕВ2ЕЕ Мое! 
233.150.122 Е9967А Оагкѕаітоп 
230.230.250 ЕбЕбЕА Тамепдег 
224.255.255 ЕОРРРЕ Ооћісуап 
222.184.135 2ЕВ887 Вийууоод 
221.160.221 Орлорр дез Рит 
220.220.220 рсрсрс Саіпебого 
220.20.60 0143 Ситзоп 
219.112.147 087093 Раіеміоіеігей 
218.165.32 ЮАА520 Соідепгоб 
218.112.214 2А7006 Огспіа 
216.191.216 ОВВЕР8 ОН Ш 
211.211.211 030303 ТУ 
210.180.140 р2в48с тап 
210.105.30 02691Е ЕЕЕ Спосоїаіе 
205.133.63 С0853Р Реги 
205.92.92 С05С5С Іпаапгед 
199.21.133 С71585 Баа Медитмоенед 
192.192.192 сососо 5імег 
189.183.107 вов76в Оагккћакі 
188.143.143 ВСВЕВЕ __ воѕуыот 
186.85.211 ВА5503 Месїштогсћіа 
184.134.11 в8860В Байкооелгой 
178.34.34 в22222 со Ғкебпіск 
176.224.230 ВОЕОЕб | Ромвефше 
176.196.222 вос4рЕ Е ЗҖЌҖТЯ 
175.238.238 АЕЕЕЕЕ Раіеіигаџоіѕе 
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Продолжение табл. А.2 


ЯСВ-код цвета Шестнадцатеричный код цвета Цвет Имя цвета 
173.255.47 АРЕЕ2Е 'Сгеепуейом 
173.216.230 АООЗЕб цоныше 
169.169.169 АЭАЭАЭ Рагкогау 
165.42.42 А52А2А Вгомп 
160.82.45 205225 Ѕіеппа 
154.205.50 9АС032 `Уейомогееп 
153.50.204 9932сс Оагкогсћіа 
152.251.152 987898 Раеогееп 
148.0.211 940003 Оагкиоіеї 
147.112.219 937008 Мебитригре 
144.238.144 90ЕЕ90 Бомогееп 
143.188.143 ВЕВСВЕ Оагкѕеадгееп 
139.69.19 884513 Ѕабаіебгомт 
139.0.139 8в008В Оагктадепіа 
139.0.0 8в0000 Багкгед 
138.43.226 ВА2ВЕ2 Віиеміоіеї 
135.206.250 87СЕРА помзкубие 
135.206.235 87СЕЕВ Ѕкурџе 
128.128.128 808080 Сгау 
128.128.0 808000 Оме 
128.0.128 800080 Ригре 
128.0.0 800000 Магооп 
127.255.212 7РЕЕО4 Ааџатагіпе 
127.255.0 ТЕРРО Сһапгеиѕе 
124.252.0 7СЕСОО 1амтогееп 
123.104.238 7В68ЕЕ МесіштеіаіеЫџе 
119.136.153 778899 Шоћіс/аѓедгау 
112.128.144 708090 Ѕіаіесгау 
107.142.35 688823 Оімедгао 
106.90.205 бАЗАСО ЅіаіеЫие 
105.105.105 696969 Оітогау 
102.205.170 66СрАА _— Месіитасиатагіпе 
100.149.237 6495Ер СотйомегЫџе 
95.158.160 ЅЕ9ЕАО Садеше 
85.107.47 556822 Оагкоімедгееп 
75.0.130 480082 1паідо 
72.209.204 4851сс — | Медилтиигаиове: 


72.61.139 48308В 
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Оагкѕіаїебіџе 


Окончание табл. А.2 


4682в4 ЅіееіЫџе 
4169Е1 ЋоуаіЫџе 


64.224.208 20000 —  Тыгацове 
60.179.113 3св371 Медилтзеаогееп 
50.205.50 32с032 Итедгееп 
47.79.79 2Е4Е4Е Сагкѕіаіедгау 
46.139.87 288857 Ѕеадгееп 
34.139.34 228822 Ғогеѕідгееп 
32.178.170 2082АА —  цомъеаогеей 
30.144.255 1Е90РР а 7 ОоаддегЫше 
25.25.112 191970 г Ее 
0.255.255 ООРЕЕР — Суап 
0.255.255 ООЕЕРЕ р Адџа 
0.255.127 ООРР7Е Эрипоогееп 
0.255.0 00Еғ00 ите 
0.250.154 ООҒАЭА _ _ Мебиитзрипаогееп 
0.206.209 00СЕр1 Оагкіигдиоіѕе 
0.191.255 ООВЕЕР ь Реерзкубше 
0.139.139 ооввав Рагксуап 
0.128.128 008080 Теа! 
0.128.0 008000 бгееп 
0.100.0 006400 Оагкогееп 
0.0.255 0000ЕЕ 

0.0.205 ооооср 

0.0.139 00008в 

0.0.128 000080 

0.0.0 000000 

Панграммы 


Для того чтобы понять всю прелесть того или иного шрифта, необходимо иметь пред- 
‘ставление обо всех знаках, которые в нем содержатся. Чтобы увидеть все буквы сразу, ис- 
пользуют специальные предложения, состоящие из всех букв алфавита, — панграммы. 


Русские панграммы 


1. В чащах юга жил был цитрус... — да, но фальшивый экземпляръ! 

2, Южно-эфиопский грач увел мышь за хобот на съезд ящериц. 

3. Аэрофотосъемка ландшафта уже выявила земли богачей и процветающих крестьян. 
4. Съешь еще этих мягких французских булок, да выпей [же] чаю. 1234567890 

5. 


Лингвисты в ужасе: фиг выговоришь этюд: «подъем челябинский, запах щец». 
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17. 
18. 


Съел бы еж лимонный пьезокварц, где электрическая юла яшму с туфом похищает. 
Эх, жирафы честно в цель шагают, да щук объять за памятьелкой... 

Эти ящерицы чешут вперед за ключом, но багаж в сейфах, поди подъедь... 
Расчешисы! Объявляю: туфли у камина, где этот хищный еж цаплю задел. 


Официально заявляю читающим: даешь подъем операции Ы! Хуже с елкой бог 
экспериментирует. 


Бегом марш! У месторождения кварцующихся фей без слез хочется электрическую 
пыль. 


Здесь фабула объять не может всех эмоций — шепелявый скороход в юбке тащит 
торячий мед. 

Художник-эксперт с компьютером всего лишь яйца в объемный низкий ящик чо- 
хом фасовал. 

Эх, взъярюсь, толкну флегматика; «Дал бы щец жарчайших, Петр!» 

Зять съел яйцо, еще чан брюквы... эх! Ждем фигу! 

Вопрос футбольных энциклопедий замещая чушью: эй, где съеден еж? 

Блеф разъедает ум, чаще цыгана живешь беспокойно, юля — грех это! 


Буквопечатающей связи нужны хорошие э/магнитные реле. дать цифры 
(1234567890+=.?-) 


Английские панграммы 


Вгіск аш мһапрѕ јитру уе1аї ѓох! 

Оиіск майя 2ерћугѕ уех Бо Ут. 

Ѕрһћіпх оГЫаск диап јийве ту уом! 

Тһе буе бохіпр міхагѕ литр диіскіу. 

Мг. Јоск, ТУ ди РҺ.О., барѕ (ем Іупх. 

Раск ту бох мйһћ буе 4о2еп Наиог ји. 

Јаскдауѕ 1оуе ту ѕрћіпх оГЫаск дџапі2. 
Ѕутра(ћігіпр моша бх Оџакег објесііуеѕ. 

Еіуе Бір аџаскіпр 2ерһугѕ јок ту мах Бей. 

Тһе ашск бгомп ох јитрѕ оуег (ће 1а2у 408. 
'Мапу-\уед Јаск Іаџећѕ а ргобеѕ оѓ ѕех дих. 

Міх 2арѓміћ Мејјоуіс апа ве! диігку Везегз. 
Оитру КіБікгег Лизе аз ехсһедиег оуегПомѕ. 
Риг21ей мотеп Бедиеахћ јегкѕ уегу ехойс 218$. 
Тигрій ѕахорћопеѕ Ыем оуег МісК”ѕ }а22у аш. 
Лт јиѕі дий апа раскей ежга барѕ Гог 112 Омеп. 
Еіуе ме ехрегіѕ јокіпр)у дите ѕатріе сһаЫ̇іѕ. 
Мат Јех диісКіу саизН буе доғеп КериЫісапѕ. 
А1агре амп јитрей диіскіу оуег мћіїе гіпс Бохез. 
Вір Лу еаппацакез сопѓоџпӣ ғапу ехрегігтпепіа! уом. 
Ехаџіѕіќе {агт мепсћ ріеѕ Боду фо! (0 ргіге ѕ1іпКег. 
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Приложение Б 
Полный текст примеров 


Код страницы с табличным дизайном 


<!БОСТУРЕ НТМЬ рџБ1іс "-//ИЗС//ЮТр НТМГ, 4.0 Тгапвісіопа1/ /ЕМ" 

"Бсср: //мми. м3 .оЕЧ/ТВ/ВЕС-Вел1 40/1о0ве.аеа“> 

<нтмІ> 

<НЕАО> 

<ТТТЬЕ>Желтый клин</ТІТІЕ> 

<ВАЗЕРОМТ Ғасе="Агіа1"> 

</НЕАО> 

<ВОрү Ьобсоппакдіп="0* бортагдіп="0" ІеҒотагдіп="0" гідћелагдіп="0"> 
<МАР пате="соипеку"> 

<АВЕА зВаре-“гесЕ" а1с="Английская версия" соогӣв="69,5,94,18" һе 
<АВЕА зһаре="гесс" а1Е="Украинская версия" соогӣз="38,5,63,17" Һе 
<АВЕА зЪаре=“гесЕ" а1с="Русская версия" соогдѕ="6,5,31,18" һкеЁ="/ги"> 
</МАР> 

<ТАВЬЕ Ъаскагоипа="Зтадев/кор_Ъ9.91" Ьссо1ог="ФЕРЕРб9" Бох4ег="0" 
се118расіпо="0" се11раддіпа="0" мійєһ="100%"> 

<ТВ> 

<ТО хомврап="2" міаећ="107"><1МС а1с="Украинский народный костюм" 
вгс="іпадев/сор1.91Е" місһ="107" Һеісһс="94" ></Тр> 

<ТО><1Мб а1с="Ффлаги" вгс="ітадеѕ/сор3.9іє" Богдег="0" Һеісһс="20* 
иветар="#сошпеку" міасћ="107"></Тр> 

<т0 а1ідп="гідће" уа1ідп="Сор" гомврап="2"> 

<ТМС вгс="ітадеѕ/сіс1е1.9іЕ" міас 
<1М0 вс="ітадев/сіЄ1е2.91Е" міас 
и культуре украинцев нижнего Поволжья"></Тр> 

</тв> 

<ТВ> 

<ТБ><1Мб вгс=“Зтадев/кор2.91Е" изаЕН="107" незове="74" а1Е=“Саратовский 
мост"></ТО> 

</тв> 

</ТАВІЕ> 

<ТАВЬЕ ЬссоІог="ућібе" Богдег= 
міасћ= "100%"> 

<ТВ> 

<Т0 Баскагошпа-"ітадез/Ьа тепи.сіё" аїісп="гідће" уа1ісп="сор" мійєһ="127"> 
<А ҺкеҒ=" "> 

<РОМТ Ғасе="Аіа1" со1ог="ЫЇме" віге="2"><В>Поселения</В></ЕОМТ> 

</А>&ПЬзр; <ВВ> 

<А Вгей="#"> 

<ЕОМТ Ғасе="Агіа1" со1ог="Ы1џе" 512е="2"><В>Организации</В></РОМТ> 


47" а16="Желтый клин" ><ВЕ> 
23" а1е="сайт об истории 


* се115ѕрасіпд="0" се11раддіпо="0" 


<РОМТ Ғасе="Агіа1" соІог="Ы1џе" ѕіте="2"><В>НаучныевпЬѕр; материа- 
лы</В></ЕОМТ> 

</А>впЬзр; <ВЕ> 

<А Бхеё="#"> 


<ҒОМТ Ғасе="Агіа1" сойог="Ы ше" ѕіте="2"><В>Творчество</В></ЕОМТ> 
</А>5прзр; <ВВ> 

<А пгеЕ="#"><РОМТ Ғасе="Агіа1" со1ог="ЬЇџе" ѕіте="2"><В>Новости</В></ҒОМТ> 
</А>5пЫер; <ВВ> 


со1ог="Ь1џе" 512: 


2"><В>06 Украине</В></ЕОМТ> 


зіте="2"><В>Гостеван</В></РОМТ> 
</А>ьпрэр; <ВВ> 

<А БкеЁ="#"> 
<ЕОМТ Ғасе="Агіа1" 
</А>5пЪзр; <ВВ> 

<А ҺгеЁ="#"'> 
<ЕОМТ Ғасе="Агіа1" 
</А>&пЬзр; 

</то> 


зіле="2"><В>Меценаты</В></РОМТ> 


ві2е="2"><В>Ссылки</В></ЕОМТ> 


<Тр Баскагоцпа="іладез/Ьс Ліпе.9іЁ" міаеп="20"></тр> 
<тТо> 

<0гу а1ісп="гідћо"><ІМС вкс= 
а1Е="Эпиграф"></ргу> 

<Н1 а1іс̧п=*сепбег">Уважаемый посетитель!</Н1> 

<Р>Мы рады приветствовать Вас на сайте "Желтый Клин", посвященном истории 

и культуре украинцев Нижнего Поволжья. </Р> 

<Р>Основной целью проекта является сбор и представление информации об истори- 
ко-культурном наследии и современной жизни украинцев Нижнего Поволжья. </Р> 
<Р>Создатели сайта ставят перед собой задачу объединения усилий ученых и всех 
небезразличных людей в изучении и сохранении истории и культуры украинского 
народа.</Р> 

<Р>В рубрике поселения представлена информация об истории заселения украинца- 
ми Нижневолжского края с начала ХУІІІ в. и до настоящего времени. В алфавит- 
ном указателе населенных пунктов дана историческая справка о каждом населен- 
ном пункте, где украинцы составляют основную или значительную часть его жите- 
лей.</Р> 

</тр> 

</ТВ> 

</ТАВІЕ> 

<ТАВЬЕ мідсћ= "100%" Һеісһће="*27"> 

<тЕ> 

<Тр Баскокоиоа=" фтадез/Ъ9_БоЕкот.91"></ТБ> 

</тв> 

</ТАВІЕ> 

</вору> 

</НТмЕ> 


Зтасез/ер1ахаЕ.91Е" міасһ="234" Һеісһ="133" 


Код страницы, переписанной при помощи С$$ 


<!РОСТУРЕ НТМЬ рир1іс *-//ИЗС//рТр НТМ 4.0 Тгапѕібіопа1/ /ЕМ" 
"ВЕЕР: / /ммм.м3 .ога/ТК/ЕЕС-ћ0п140/10оѕе.аса"> 

<НтМІ> 

<НЕАр> 

<ТЕТЬЕ>Желтый клин</ТІТІЕ> 

<ЗТУГЕ суре="ЕехЕ/свз"> 

вору { 

ЕопЕ-Еапа1у: Агіа1, запв-зег1Е; 

тагдіп: Орх; 


н1 { 
сехЕ-а119п: сепбек 


Чсопеепе { 

раддіпд:10рх 5рх 10рх 15рх 

} 

#Еоосехг ( 

Ъаскогоипа: ик] ("іладеѕ/Ьа робсоњ.сіё") гереас-х; 
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} 
#1іпе { 
Ъаскакоипа: иг1("ітадеѕ/Ьа_1іпе.9іЁ") гереас-у; 
} 
Фтази { 
Ђаскагоцпӣ: #ЕЕЕ; 
} 


#пепц { 

Ъаскохоцпа: игі ("ітадеѕ/Ьа лепи.сіё") кереае-у; 
рааа1па-кор: 0.4ет; 

Сехі-а1ісп:гісћ; 

уегсіса1-а1ідп: бор; 


#тепи А:1іпк, #тепц А:ассіуе, #тепи А:уіѕісеа { 
со1ог: Бе; 

Ғопе: Ьо1а 12рх Агіа1, ѕапз-ѕегіє; 

1іпе-һеідһс : 130 
раааіпо-гіће:3рх; 

Сехс-десогасіоп:попе 

} 

#тепи А:һоуег ( 

сехс-десогасіоп: ипаег1іпе 

} 

жсор ( 

Ъаскахоциа: НРЕЕЕб9 ик] ("ітадев/сор Ъс.9і#") кереак-х; 
} 

</5ТУШЕ> 

</НЕАР> 

<ворү> 

<МАР пате= "соцпсгу"> 

<АВЕА 
<АВЕА 
<АВЕА 
</МАР> 
<ТАВЬЕ се11раддіпа="0" се115расіпа="0* ід=" ор" міасћ="100%"> 
<тв> 

<Тр коизрап="2" мідеһ="107"><1М6 а1е="Украинский народный костюм" 
згс="1щадев/ор1.91Е" міасћ= "107" Һеіс̧һс="94" ></ТО> 

<Тр><ІМС а1с="флаги" ѕгс="ітадез/бор3.9іє" Богдег="0" Һеідһі="20" 
оветар=" #соопігу" мідећ="107"></7р> 

< ајісп=*гісһће" уаіісп="ор" комврап="2"> 

<ІМС згс="іладеѕ/сіс1е1.сіЕ" міасһ= "290" Һеісһе="47" а1 
<1Мб згс=*іљладеѕ/сіс1е2.91Е" міасћ="412" Һеіс̧һе="23" а! 
и культуре украинцев нижнего Поволжья" ></Тр> 

</ТЕ> 

«тЕ> 

<ТО><1МСб ѕгс="ітадеѕ/сор2.9і&" мійєћ= "107" везове= 
мост"></ТО> 

</ТВ> 

</ТАВИЕ> 

<ТАВЬЕ се11зрас1па= 


Английская версия" соога! 69,5,94,18" һгеЁ=" /еп"> 
Украинская версия" соогӣѕ="38,5,6: 7" ҺгеЁ="/џа"> 
Русская версия" соохӣв= "6,5, 31,18" “вкеЕ= "/ки"> 


Желтый клин"><ВК> 
сайт об истории 


74" а1Е="Саратовский 


" се11радӣіпд="0" ід="таіп" міасћ="100%"> 


"тепи* міаєћ=*127°%> 

"іпдех. Һет] ">Поселения</А><ВВ> 
<А һгеѓ="#">Организации</А><ВЕ> 

<А ВкеЁ="#">Научные материалы</А><ВЕ> 
<А һгеѓ="#">Творчество</А><ВЕ> 

<А Вгеё="#">Новости</А><ВВ> 

<А БгеЁ="#">06 Украине</А><ВВ> 

<А һгеЁ="#"'>Гостевая</А><ВЕ> 

<А ВгеЁ="#">Меценаты</А><ВВ> 
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<А ВгеЁ="#">Ссылки</А> 

</тр> 

<Тр ід="1іпе" мійһ="20"></т0> 

<тр ід="сопёепе"> 

<0ІУ а14ап="х49ВЕ"><1МС згс="ітадеѕ/ерісгаҒ.сіє" мійсһ="234" Һеідһе="133" 
а1с="Эпиграф"></0їу> 

<Н1>Уважаемый посетитель!</Н1> 

<Р>Мы рады приветствовать Вас на сайте "Желтый Клин", посвященном истории 

и культуре украинцев Нижнего Поволжья. </Р> 

<Р>Основной целью проекта является сбор и представление информации об истори- 
ко-культурном наследии и современной жизни украинцев Нижнего Поволжья. </Р> 
<Р>Создатели сайта ставят перед собой задачу объединения усилий ученых и всех 
небезразличных людей в изучении и сохранении истории и культуры украинского 
народа. </Р> 

<Р>В рубрике поселения представлена информация об истории заселения украинца- 
ми Нижневолжского края с начала ХҮІІІ в. и до настоящего времени. В алфавит- 
ном указателе населенных пунктов дана историческая справка о каждом населен- 
ном пункте, где украинцы составляют основную или значительную часть его жите- 
лей.</Р> 

</тр> 

</тв> 

</ТАВЬЕ> 

<ТАВІЕ 14="Еоокех" міасһ= "100%" Һеісһ="27"> 

<ТЕ> 

<тр></Тр> 

</тВ> 

</ТАВЬЕ> 

</вору> 

</нтми> 


Полный пример кода сайта фирмы “ДОМ” 
<!БОСТУРЕ НТМ. РОВЦІС "-//МЗС//ОТО НТМЬ 4.01 Ткапз1Е1опа1//ЕМ"> 


<НТМІ> 
<НЕАО> 
<ТТТЬЕ>Фирма ДОМ</ТТТЬЕ> 


<5ТҮЦЕ> 

Ворү{ 

Ъаскогоцпа: иг1(ітадев/аЬз_Ьд.діё) 0 0 гереас-у #ВОАР92; 
зсго11Баг-38-1і9һ-со1ог:#РРОЮР; 
всго11Баг-аггом-соїог:#330; 
всго11Ьаг-Баѕе-со1ог:#996; 
всго11раг-дагк-вһадом-со1ог:#960; 
всго]1раг- Ғасе-со1ог:#08р4В2; 
всго11Ьаг-һідћ1ідһе-со1ог:#Ғ9РОрЕ; 
ѕсго11раг-ѕһадом-со1ог: #080482; 
вско11Баг-Ехаск-со1ог: #РЕС; 


} 

#пеаа( 

Баскагоцпа: иг1 (іпауеѕ/ћоџве.јро) по-гереае #ҒЕР; 
һеідһс:123рх; 

міс: 640рх; 


} 

#һеаа н1{ 

со1ок: #333300; 

ЕопЕ: 2ет Таһота, зап-зек1Е; 
рааа1па-к1аве: 5рх; 
Сехс-а1ідп: клаве: 
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} 

#һеаа н2{ 

со1ог: #996; 

Ғопе: 1.2еп Таһопа, ѕап-зегіё; 
райдіпо-гідһс: 5рх; 
пагдіп-сор:-1ет; 

Сехс-а1ісп: гісће; 

} 

#тепо( 

Баскогоипа: #080482; 
розісіоп: арѕо1џбе 
её: 0рх; 

кор: аџбо; 

міаєһ: 143рх; 
Һеіһ: 400рх 

} 

фтери А:1іпк, #тепи А:ассіуе, #тепи А:уіѕісей( 
со1ог: #333300; 

Еопе: Ьо14 0.Веш Таһота, ѕап-ѕегіё; 
раддіпо-1е#е:5рх; 

Сехс-десогасіоп:попе; 

} 

#тепи А:Ноуех{ 

со1ок: РРР; 


#сопсепе ( 
Ъаскакоила: НРЕЕ; 
роѕісіоп: аБзо1иее; 
ТеЁе: 143рх; 

Сор: або; 

эзаЕв: 392рх; 
Безаве:400рх; 

1) 


#сопсепе рту 

раддіпд: 0.5ет; 

) 

#сопсепе Р( 

тагдіп-бор: Оет; 

} 

#сопсепс А:1іпк, #сопеепЕ А:асбіче( 
со1ог: #330; 

} 

фсопкепЕ А:Ноуек{ 

со1ог: #060; 
} 

#сопсепс А:уіѕісеа( 
со1ог: #996; 


} 

#Баппех ( 
Баскагоцпа: #996; 
ров1Е1оп: абзойиее; 
ее: 535рх; 

сор: аџсо; 
сехЕ-а149п: сепеек; 
міаєһ: 105рх; 
Һеісћ:400рх 

} 


</5ТҮІЕ> 
</НЕАО> 


<ВОБУ ТОРМАВСІМ="0" ГЕЕТМАВСТМ="О" КІСНТМАКСІМ= "0° ВОТТОММАКСІМ="0"> 
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<0ІУ 14=“веаа“> 

<Н1>Строительная фирма "ДОМ"</Н1> 

<Н2>Строим, производим, продаем</Н2> 

</0ту> 

«РТУ і="пепи"> 

перевод строки ВВ — для небольшого отступа сверху --> 
#">Главная</А><ВВ> 

#">0 компании</А><ВЕ> 


#">Продукция</А><ВВ> 
#">Контакты</А><ВВ> 
<А НВЕЕ="#">Гостевая книга</А><ВЕ> 
</0Іу> 
<0Іу іа="сопсепс"> 
<ргу> 


<Р><5ТЕОМС>Фирма "Дом" </5ТКОМО> образовалась в 1998 году и с тех пор занимает 
лидирующее место на рынке строительства и отделочных материалов. </Р> 
<Р>Первоначально предполагалось оказание услуг по строительству, ремонту 
квартир и сдаче помещений "под ключ". Но в последствие стало понятно, что 
оказание комплекса услуг по подбору строительных и отделочных материалов, 

а также сантехники наиболее интересно клиенту. </Р> 

<Р>Фирма "Дом" имеет <А НВЕР="#">сеть магазинов</А>, расположенных в разных 
районах города. В них Вы можете найти все для вашего дома, начиная с отделоч- 
ных материалов и заканчивая мебелью и аксессуарами.</Р> 

<Р>Наши опытные дизайнеры помогут Вам сделать выбор. При необходимости воз- 
можно компьютерное моделирование и перепланировка квартиры. </Р> 

<Р>Добавляем еще один параграф текста, чтобы проверить переполнение бло- 
ка.</р> 

</рту> 

</рту> 

<РТ\У 14="Баппег"> 


тадез/Ъаппех100.91Е" ИТОТН="100" НЕІСНТ="100" РОКА" ОУНИЗЯВЕО» 
<ІМС ЅКС="ітадев/Балпег100.91#" МТОТН="100" НЕТОНТ="100" АШТ= 


1тадез/кпор1.91Е" ИТОТН="88" НЕТСНТ="31" ВОКЮЕК= "0 "><ВЕ><ВЕ> 
тадез/кпор2.91Е" МТОТН="88" НЕТСНТ="31" ВОВОЕВ="0"> 


Полный код примера “Раскрывающиеся меню” 


<100ОСТҮРЕ НІМІ, РОВЫТС *-//ИЗС//ОТО НТМЬ 4.01 Тгапѕісіопа1 //ЕМ"> 
«нтмь> 

<НЕАр> 

<ТЕТЬЕ>Выпадающее меню</ТТТЬЕ> 

<БТҮІЕ ТУРЕ="ЕехЕ/свз"> 

вору { 

Ғопе-Ғатілу: Таһота, ѕап=-вегіє; 

тагдіп:0рх: 


} 

#пеаа{ 
ВезаНЕ:50рх; 
міасһ: 100%; 
розібіоп:арѕо1ибе; 
Лее: Орх; 

Сор: 0рх; 

} 

#Веаа н1{ 

со1окг: пауу; 
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пага1и-кор: бет; 

рааазпа-кзанЕ: 0.5ет; 

Сехс-а1іс̧п: кзовЕ; 

} 

#тегпи( 

Ъаскакоцпа: #СОСОСО; 
Ъогаег-БоЕЕот: 1рх ѕо1іа; 
Ъогаег-кор: 1рх =011а; 
райдіпа: 2рх 10рх; 

роз1Е1оп:аъзо1 ие; 

Сор:50рх; 

міаећ:100%; 

} 

#тепи А{ 

со1ог: паму; 

ЕопЕ: Бо1А 13рх Таһота, запв-зех1#; 

Сехе-десогаєіоп:попе; 

} 

#сопсепе{ 

Ғопс-віге: 0.Вет; 

райдіпа: 0.5ет; 

ровібіоп: аБво1иее; 

Лее: Орх; 

Сор: В0рх; 

} 

НсопкепЕ Н1{ 

со1ог: паму; 

ЕопЕ-в12е: 1.4ет; 

пахо1п-гор:0ел; 

радаіпа-гіћ: 0.5ет; 

Сехе-а1ісп: гісће; 

} 


#таіл( 

Ъаскагоцпа: #090р9ЕС; 
Богех: 1рх 501іа #404082; 
міаећ: 80рх; 

ровісіоп: арво1цсе; 

ТеЕЕ: 10рх; 

Сор: 74рх; 

уіѕірі1ісу: Һіадеп; 
2-іпдех:1; 


#паіп А, #поуіе А, #4звие А, #вигуеу А, #Еокши А{ 
со1ог: пауу; 

Ғопс-візе: 13рх; 

Боск; 


ехЕ-десогаЕ1оп:попе; 

} 

#паіп А:Воуек, ёпоуіе А:Һохег, #іѕѕџе А:һоүег, #викуеу А:Һоуег, #Ғогип 
А:һохег( 

сойог: #ЕЕЕ; 

Баскагошта: #6С6СВ7; 

2 

#тоуіеС 

Ъаскакоила: #0909ЕС; 
Богдег: 1рх 50118 #404082; 
міасћ:92рх; 

ров1ЕЗ оп:афзо1 ке; 

ТеёЕ: 92рх; 

бор: 74рх; 
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уіѕірі1ібу: В194еп; 
2-іпдех:2; 

} 

#155ще{ 

Ъаскагоила: #ОЭБЭЕС; 
Ъогдег: 1рх ѕо1іа #404082; 
міаєһ: Ворх; 
роз1Е1оп:аЪво1асе; 

1еЁЕ: 173рх; 

сор: 74рх; 

уіѕірі1ібу: Һіддеп; 
2-іпдех:3; 

} 

#зикуеу{ 

Баскаӯгоцпа: #0909ЕС; 
Богдег: 1рх ѕо1іа #404082; 
міаећ: 90рх; 
ровісіоп:арѕо10џбе; 

Лес: 245рх; 


Һійдеп; 


#Еоғшм 

Ъаскакоцпа: #0909ЕС; 
Ђогӣег: 1рх ѕо1іа #404082; 
міасһ: 80рх; 
роѕібіоп:аѕо1џке; 

1еѓс: 322рх; 

сор: 74рх; 


Аве 
2-іпдех:5; 

} 

</5туьЕ> 

<ЗСВТРТ ТҮРЕ="бехі/јачаѕсгір"> 

ФирсЕфоп Нідел11() { 

доситепе .деЕЕ1етепЕВуТА ( "таіп") .ѕбу1е.уізіЫі1ісу= 'ћібдеп' 
‘доситепе .деЕЕ1етепЕВУТА ("поуіе") .ѕсу1е.уізірі1ісу= 'Һіадеп' 
ЗоситепЕ .десЕ1епепеВута ("ізвие") .зсу1е.уіѕірі1ісу= 'ћійдеп' 
доситепе .деЕЕ1етепЕВуТА("зигуеу") .вбу1е.уіѕіБі1ібу= 'Һіадеп' 
доситепе .деЕЕ1етепЕВУТА ( " Еогит") .всу1е.уіѕіЬі1ібу= 'Һіадеп' 
} 

Ғопссіоп Маіп() { 

оситепе .десЕІетепВуїа ("паіп") .ѕсу1е.уіѕірі1ісу= 'уівіБе" 
оситепе .декЕ1етепЕВутА ("поуіе") .=бу1е.уіѕірі1ісу= 'һіддеп' 
досшпепе .есЕ1етепеВуІа ("іввие") .збу1е.уіѕірі1ісу= 'ћіадеп' 
доситепе .десЕ1етепеВута ( "зигуеу") .ѕбу1е.уіѕірі1ісу= 'ћіддеп' 
досотепе .сесЕ1епепсВутаӣ (" Еогит") .зсу1е,уівірі1ісу= 'Һіддеп' 

} 


Ћіддеп; 


ФипсЕ оп Моуіе() { 

‘Зосутепе .деЕЕ1етепЕВуТаА ("таіп") .ѕсу1е.уіѕірі1ібу= 'һіддеп' 
досотепі .десЕ1елепеВута ( "поуіе") .ѕсу1е.уівірі1ісу='уіѕіре' 
Зоситепе .десЕ1етепеВуТА ("іѕѕие" ) .зсу1е.уіѕірі1ісу= 'Һіддеп' 
Зоситепе .десЕ1епепеВу1а ("зцигуеу") .ѕсу1е.уіѕірі1ісу= 'Һіддеп' 
доситепс .сдесЕ1етепсвүта (" Ёогит") .ѕсу1е.уізірі1ісу= 'Һіддеп' 
} 

Ғопссіоп Тззие() ( 

ЗоситепЕ .дебЕ1епепеВута ("паіп") .вбу1е.уіѕіЬі1ібу= 'Һіадеп' 
Чоситепе .есЕ1епепеВу1а ( "поуіе") .ѕсуІе.уіѕірі1ісу= 'Һіддеп' 
ЗоситепЕ .десЕ1етепеВута ("ізвџе") .зсу1е.уіѕірі1ієу= 'уіѕір1е' 
досотепе .десЕ1епепЕВуТа ("вигуеу") .збу1е.уіѕірі1ібу= 'ћійдеп' 
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доситепё .декЕлетепЕВУТа( "Еокит") .5Еу1е.%15151115у='Бзадеп' 
5А 

Ғипсбіоп Ѕигуеу() ( 

доситепе .дебЕ1епепівута ( "таіп") .ѕбу1е.уізірі1ібу='Һіддеп' 
доситепе .дебЕ1епепЕВута ("поуіе") .збу1е.уіѕірі1ісу= 'Һіддеп' 
доситепС .дееЕ1етепЕВуТА ("іѕѕие" ) .ѕсу1е.уіѕіһі1ісу= 'Һіддеп' 
досопепЕ .десЕ1епепЕВуТа( "=шгуеу") .зсу1е.уіѕірі1ісу='уіѕір1е' 
досипепе .десЕ1етепеВута ( " Ёогим“ ) .зсу1е.уіѕірі1ісу= 'Һіддеп' 
} 

Ғипссіоп Роршт() { 

ЧоситепЕ .аесЕ1етепеВута ("паі") .зсу1е .уіѕірі1ісу= 'ћіадеп' 
доситепЕ .десЕ1етепеВуТа ( “поуіе") .вбу1е.уіѕірі1ісу='Һіддеп' 
доситепе .есЕ1епепеВута ( "іѕвие") .=су1е.уіѕірі1ісу= 'ћіадеп' 
доситепе .чеЕЕ1етепЕВУТА (“зикуеу") .=Су1е.уіѕіБі1ібу= 'Һіадеп' 
‘доситепЕ .десЕ1етепЕВута (“Богом”) .збу1е.уіѕірі1ісу='уіѕіре' 
А 


</5СКІРТ> 

</НЕАО> 

<ВОрү сортагдіп="0" 1еетака1: 
опіоад= "НідеА11() "> 

<01Іу Ір=*Һеаа" оплоџѕеоуег="НідеА11 () "><Н1>Все о кино</Н1></0Іу> 
<0ІУ Ір= "пепу"> 


0" гідћелагадіп="0" Ьоссотпагдіп="0" 


оплоиѕеоуег= "Маіп () ">Главная</А>&ПпЬхр; | | &пЬѕр; 
оплоцѕеоуег= "Моуіе () ">Фильмы</А>&ПЬзр; | |&пЬѕр; 
оплоџѕеоуег= "Іззџе () ">Статьи</А>&пЬзр; | |&пЬѕр; 


оптоизеоуег: 
оптоизеоуех: 


бигуеу () ">Обзоры< /А>&пЪзр; | | &п5зр; 
Ғогшт() ">Форум</А> 


</оту> 

<0ІУ тр="сопеепЕ" оптоизеоуег=“Н1аеА11 () "> 

<Н1>Х-Меп 3</н1> 

<Р>20Ей Сепешгу Рох и Магуе1 Ѕсџдіоз сдвинулись с места в деле "Люди Х 3". 
Новый сценарий пишет Саймон Кинберг ("Мистер и Миссис Смит", "Электра", 
"Фантастическая четверка"). Кинберг сообщил, что сюжет пока находится в раз- 
работке. "Мне понравились 2 первых фильма сериала, — сказал Кинберг. — 

Я и раньше работал с Ғох и Магуе1 над другими проектами, и когда они предло- 
жили мне поработать над этим проектом, я с удовольствием согласился. Ведь 

я же вырос на этом комиксе. Я люблю их всей душой. Это будет лучший фильм 

в трилогии. Это будет нашим "Возвращение короля". </Р> 

<Р>Продюсеры фильма планируют начать съемки летом, а также находятся в поис- 
ках режиссера, так как от режиссера двух первых фильмов Брайана Сингера реши- 
ли отказаться. Актерский же состав прелполагается оставить таким, как и рань- 
ше. </Р> 

</оту> 


таіпе> 
#">Новости</А> 
#">Карта сайта</А> 


тоуіе"> 
#">Комедии</А> 
#">Мелодрамы</А> 
#">Триллеры</А> 
#">Ужасы</А> 
#">Фантастика</А> 
#">Боевики</А> 
#">Мультфильмы</А> 


#">06 актерах</А> 
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<А НВЕЕ=“#">О съемках</А> 
</от\> 

<РТУ 14="викуеу" папе="зикуеу"> 
<А НВЕЕ="#">Кино-новинки</А> 
<А НВЕЕ=*#=>ПУО-новинки</А> 
</оту> 

<0ІУ ід=* Ғогшп" папе=" огит"> 
<Регистрация</А> 

</рту> 

</вору> 

</НтМІ> 
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Приложение В 


Глоссарий 


Алгоритм — точное предписание исполнителю совершить определенную последова- 
тельность действий для достижения поставленной цели за конечное число шагов. 

Атрибут — неотъемлемое свойство какого-либо объекта. 

Браузер — программа, предоставляющая возможности навигации и просмотра У\еБ- 
сайтов. 

Гарнитура шрифта — внешний вид, рисунок шрифта. В одной и той же гарнитуре 
шрифты могут отличаться размером (кеглем). начертанием и насышенностью. 

Гиперссылка — фрагмент НТМІ -документа, указывающий на другой файл, который 
может быть расположен в Интернет, и содержащий полный путь (ОК) к этому файлу. 
Гиперссылка для пользователя — графическое изображение или текст на МеБ-странице, 
устанавливающий связь и позволяющий переходить к другим документам, расположен- 
ным всети Интернет. 

Гипертекст — текст в любом формате, имеющий такую особенность: некоторые части 
текста могут ссылаться на другие части текста, что позволяет быстро переходить от одной 
части к другой. 

Каскадная таблица стилей (С$5$) — набор С$$-правил, описывающих стили для эле- 
ментов документа. 

Навигация (в информационных технологиях) — процесс “вождения” пользователя по. 
логически связанным данным. Навигация осуществляется в два этапа: поиск объектов из 
области интересов; перемещение по гиперссылкам, связывающим объекты. 

Наследование (в объектно-ориентированном программировании) — свойство объек- 
та, заключающееся в том, что характеристики одного ‘объекта (объекта предка) могут пе- 
редаваться другому объекту (объекту-потомку) без их повторного описания. Наследова- 
ние упрощает описание объектов. 

Пиксель — неделимая точка в графическом изображении; наименьший элемент рас- 
трового изображения. Пиксель характеризуется прямоугольной формой и размерами, 
определяющими разрешение изображения. 

Селектор — элемент С$8-правила, который служит для того, чтобы в НТМИ- 
документе однозначно определить тот элемент, к которому следует применить данное 
‘С$$-правило. 

Семантика — в программировании — система правил истолкования отдельных язы- 
ковых конструкций. Семантика определяет смысловое значение прелложений алгорит- 
мического языка. 


Синтаксис (применительно к естественным языкам и языкам программирования 03- 
начает практически одно и то же) — набор правил, по которым строятся предложения 
языка, позволяющий определить, корректные ли предложения в этом языке. 


Скрипт — см. Сценарий 
Спецификация — описание всех элементов языка и правил их обработки. 


Сценарий — небольшая программа, написанная на каком-либо языке программиро- 
вания и выполняющаяся на стороне сервера или клиента. 

Тег — элемент НТМ\, представляющий текст, заключенный в угловые скобки <>. 
Тег является активным элементом, изменяющим ‚представление следующей за ним ин- 
формации. Тег может иметь некоторое количество атрибутов. Обычно используются два 
тега — открывающий и закрывающий. 

Форма (еђ-форма) — набор элементов (текстовых полей, переключателей, флажков, 
списков и кнопок), предназначенных для ввода пользователем информации и обмена 
(отправка/получение) этой информацией с МеЬ-сервером. 

Форматирование текста — процесс придания тексту определенного вида, связанный 
с определением левой и правой границ текста, абзацного отступа и т.д. 

Фрейм — элемент языка НТМІ. версии 3.0 и выше. Фреймы позволяют разделить 
Мер-страницу на несколько независимых окон и в каждом из них размещать отдельную 
Меб-страницу. При этом допускаются ссылки из одного окна в другое посредством об- 
ращения к нему по имени (атрибут сахдее). 


Шрифт — набор символов алфавита, характеризующихся одинаковыми: характером 
рисунка; формой или начертанием (прямой, наклонный, курсив); насышенностью 
(светлый, полужирный, жирный); и размером в пунктах (1 пункт = 1/72 дюйма). Шрифт 
предназначен для восприятия информации людьми и устройствами. 

НТМІ, (НурегТехё Магкир Гаприаре) — язык гипертекстовой разметки, с помощью. 
которого создают МеЬ-страницы. 

НТТР (НурегТехі Тгапѕѓег РгоќосоЇ) — протокол передачи гипертекста. На основе 
этого протокола строятся взаимодействия между браузером и \/еБ-сервером. 

МІМЕ (Мубригрозе Пмегпег Май Ехіепѕіопѕ — Многоцелевые расширения почты 
Интернет) — стандарт был изначально разработан для передачи файлов по элек- 
тронной почте, но в последствие стал применяться и для других сервисов Интернет, в том 
числе и для МеБ. Более общее для МІМЕ-типов название сейчас — Іпіегпеі Мейіа Турез. 

ОГ (Опуегза! Везоигсе 14епй ег) — универсальный идентификатор ресурса. Исполь- 
зуется для определения адреса ресурса в Интернет. 

Мер-сервер — хранит и предоставляет в сети Интернет данные, организованные в ви- 
‘де \еБ-страниц. М№еБ-сервер отвечает за обработку запросов клиентов к \еБ-сайту и ис- 
полнение ССІ-, ЈЅР-, АЅР-, РНР- и других приложений. 

Мер-страница — документ, оформленный при помощи языка НТМІ. для возможно- 
сти его дальнейшего распространения и просмотра в ММУ. 


ХНТМІ, (еЖепзйе НурегТехё Магкир Таприаве) — расширяемый язык гипертексто- 
вой разметки. 
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с 
С55, 165; 403 
блоки, 219; 300 
объявления, 179 


плавающие, 328 
позиционирование, 305 
управление 
видимостью, 295 
переполнением, 296 
фиксированный, 327 
ширина и высота, 281 
блоковая модель, 271 
включение в НТМЕ, 174 
возможности, 173 
выбор имен, 250 
вывод на печать, 356 
группировка селекторов, 252 
дерево элементов, 183 
единицы измерения, 187 
задание (ВТ, 190 
интервалы, 216 
использование ЈауаЅсгірі, 293 
история развития, 171 
каскадирование, 193 
наследование, 192 
обозначение цвета, 189 
объединение стилей, 354 
оптимизация таблиц, 250 
оформление текста, 257 
элементов форм, 345 
позиционирование 
нормальный поток, 307 
плавающие блоки, 328 
фиксированные блоки, 327 
правила, 179 
процентные величины, 189. 
псевдоклассы, 186 
псевдоэлементы, 184 
раскрывающееся меню, 334 


свойства, 239 

розшюоп, 312 

границы блока, 223 

отступы, 227; 229 

поля, 229 

поля блока, 220 

списки, 233 

текст, 212 

цвет и фон, 199 

шрифт, 204 
селектор, 179 

типы, 180 
синтаксис, 179 
слои, 334 
специфичность селекторов, 196 
ссылки-кнопки, 355 
стенографические свойства, 251 
стили 

полосы прокрутки, 353 
структура блока, 271 
структуризация таблиц, 249 
таблицы, 300 
ускорение обработки таблиц, 284 
элементы форм, 345 

С55-правила, 179 
'С85-редакторы, 360 


р 
ОМ, 23 
Юто, 29; 135 

Е 
ЕП.Е, 23 
РТР, 23 

с 
СІР, 372; 378 


н 


НТМІ., 17; 18; 19; 20; 27; 147; 165; 404 


аббревиатуры, 47 
алресация, 53 
атрибут, 29 
блоки, 219; 271 
внедрение объектов, 71 
выделение элементов, 45 
гиперссылка, 51 
графика, 63 
заголовки, 37 
звук, 69 
индексы, 48 
комментарии, 36 
контейнер, 39 
оптимизация кода, 137 
переход к С5$, 239 
перспективы развития, 138 
привязка, 51 
подключение С$5$, 174 
разделители, 49 
расстановка кавычек, 47 
синтаксис, 27 
специальные символы, 62; 387 
спецификации, 19 
списки, 58 
ссылки, 51; 66 
структура документа, 29 
сценарий, 119 
таблица, 79; 136 

цветов, 388 
текстовые блоки, 36 
форма, 101; 102 
форматирование, 39 
фрейм, 123; 131 
шрифт, 41 
элемент, 28 

НТМІ -документ, 25 
НТМЕ-редакторы, 139 


НТТР, 20; 23; 404 

І 
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1Р-адрес, 23 
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ЈауаЅсгірі, 293 
ЈРЕС, 372; 377 
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МІМЕ, 404 
МІМЕ-типы, 75 

Р 
РМС, 373; 380 

5 
УСМ, 27 

о 
ВТ, 20; 404 
ВУ, 22; 52 
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Меб-графика, 370 
УМеь-сайт, 25 
классификация, 142 
навигация, 143 
оптимизация, 384 
пример созлания, 147 
публикация, 381 
рейтинг. 384. 
рекламная кампания. 383 
созлание, 141 
УМеБ-сервер, 404 
МеБ-страница, 20; 25; 404 
Мопа Мае Мер, 18; 20 


х 
ХНТМІ., 19; 404 
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Аббревиатура, 47 
Абзац, 38 
‘Адресация, 52 
Алгоритм, 403 
Атрибут, 29; 403 
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Безопасные цвета Интернет, 370 
Блок, 300 

границы, 219; 223 

контент, 219 

плаваюший, 328 

поля, 219; 220 


фиксированный, 327 
Браузер, 18; 25; 403 

‘адаптация кода. 26 

блоковая модель, 276 

возможности навигации, 145 


изменение размера шрифта, 211 


модель визуального 
форматирования, 286. 

обработка С$$, 197 

определение, 20 


В 
Вес странииы, 66 
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Гиперсвязи, 51 
Гиперссылка, 51; 403 
Гипертекст, 18; 403 
Графика, 63; 365; 368 


безопасные цвета Интернет, 370 


векторная, 365 
для МеБ, 370 
навигационные карты, 76 
растровая, 366 
мат 

СІЕ, 372 

ЈРЕС, 372 

РМС, 373 
цветовые молели, 368 

Группировка селекторов, 252 
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Декларация документа, 29 
Дерево элементов, 183; 184 
Документ 
МІМЕ-тип, 75 
декларация типа, 135 
динамическое изменение, 122 
заголовок, 30; 239 
кодировка, 33 
определение типа, 280 
оформление, 166 
‘семантика, 18 
содержимое, 166 
тело, 30; 33 
Домен, 23 
регистрация, 381 


Заголовок, 37 

документа, 30; 31 
Задание ИВЦ, 190 
Звук, 69 


и 


Изображения-ссылка, 66 
Индексация страниц, 32 
Индексы, 48 

Интервалы, 216 
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Карта сайта, 143 
Каскалирование. 193 
Клиент, 20 
Ключевые слова, 32 
Кодировка, 33 
Консорциум МЗС, 19 
Контейнер, 39; 272 
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Навигационная карта, 76 
Навигационное меню, 244 
Навигация, 403 
возможности браузеров, 145 
дублируюшая, 144 
Наследование, 192: 403 
Нормальный поток, 307 
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Обозначение цвета, 189 
Объединение стилей, 354 
Оптимизация 
таблиц стилей, 250) 
кода, 137 


Относительное позиционирование, 312 


Отступ, 227 


п 


Панграмма, 391 

Паук, 384 

Пиксель, 403 

Позиционирование 
абсолютное, 314 
блоков, 305 
относительное, 312 

Поисковая система, 384 
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Поисковый робот, 32 Тег, 28; 404 


Полоса прокрутки, 353 Текст. 212 
Привязка, 51; 54 абзац, 38 
Псевдокласс, 186 выделение элементов, 45 
Псевдоэлемент, 184 интервалы, 216 
обтекание, 64 
Р оформление, 261 
Разделители, 49 срелствами С$$, 257 


Разметка, 18 форматирование, 39: 404 
Разрешение, 34 Текстовые блоки, 36 
Раскрывающееся меню, 334 Тело документа, 30; 33 
Расстановка кавычек, 47 Ф 


с Фокус ввода, 118 
Форма, 101; 102; 404 
стенографические, 251 сар, Т 08 15 
Селектор, 179:405 е оформление элементов в С55, 345 
группировка, 186; 252 переключатель, 106 
контекстный, 183 список, 111 


по идентификатору, 182 текстовое поле, 104; 110 
$ управляющие элементы, 101 
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по классу, 180 
по элементу, 180 флажок, 105 
специфичность, 196 фокус ввода, 118 


Форматирование, 39 
Семантика, 403 рматиро Я 
Фрейм, 123; 124; 131; 404 


Сервер, 20 
Синтаксис, 403 загрузка ссылок, 128 
Скрипт, 403 
Слой, 334 х 
Специальные символы, 62 Хост, 23 
Списки, 58; 233 Хостинг, 382 
Ссылка, 51; 54; 66 . 
Стиль, 165 ц 
Сценарий, 101; 119; 404 Цвет, 35 
т Цветовые модели, 368 
Таблица, 79; 80; 136; 241; 300 Ш 
здгорирєобриботки, 97 Шрифт, 40; 204; 404 
группировка ячеек, 92 гарнитура, 257: 403 
конфликт границ, 302 размер, 258 К, 
название, 85 = 
особенности использования, 95 управление, 41 
ячейки, 86. э 
Таблица стилей, 165 = 
внешняя, 176 Элемент, 28 
внутренняя, 175 атрибут, 29 
встроенная, 175 
импорт, 178 
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В этой книге 
в простой и доступной 
форме излагаются 
основы Меб-технологий, 
основные принципы 
создания НТМІ.-разметки 
и методы использования 
технологии С55 для 
самостоятельной 
разработки Меб-сайтов. 
Ее цель — научить 
читателя самостоятельно 
писать грамотный, 
оптимизированный НТМІ.- 
код, используя все 
существующие 
возможности. Помимо 
описания использования 


ПОДРОБНО, 


ДОСТУПНО, 
ЭФФЕКТИВНО! 


гарантирует эффективное 


амостоятельное 


изучение современных компьютерных 


НТМІ., большое внимание 
в книге уделено 
относительно новой 
технологии, 
предоставляющей новые 
интересные возможности 
визуализации МеЬ- 
страниц — каскадным 
таблицам стилей 
(Сазсадта 5#уІе Ѕһееї, 
С55). Отдельно 
обсуждаются вопросы 
оптимизации графических 
элементов, поскольку 
грамотная подготовка 
изображений — очень 
важная составляющая 
оптимизации М/еЬ-сайтов. 


Е.В. Мальчу; 


Книга содержит 
множество полезных 
рекомендаций и 
практических примеров 
по всем обсуждаемым 
вопросам. Благодаря 
исключительной глубине 
охвата каждой из теми 
детальности изложения 
материала она будет 
полезна не только 
начинающим, но и 
достаточно опытным 
создателям как 
отдельных НТМЕ- 
документов, так и Меь- 
сайтов в целом. 
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